---
title: Interface icons
layout: common-ux-layout.hbs
---

<section class="sg-section">
  <p>Icons is preferrably treated with consequent sizes rather than flowing along with the current text size.</p>
  <h3>Suggested sizes: <span>24x24</span> and <span>36x36</span></h3>
</section>

<section class="sg-section">
  <h2>Rotate icons</h2>
  <p>If you add one of the classes .right, .down .left you can get the icons to rotate</p>

  <div class="sg-grid sg-container">
    {{#each icon-svg-arrows}}
    <div class="sg-item icon">
      <div class="showcase-box">
        <div class="showcase svg">
          {{>icon_svg name=icon class=class}}
        </div>
        <div class="showcase-name" style="height: 37px">{{class}}</div>
      </div>
    </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h2>Special variations icons</h2>
  <p>Add a container with class .icon-superlativ to get a red cirkular star around a white icon</p>

  <div class="sg-grid sg-container">
    <div class="sg-item">
      <div class="showcase-box">
        <div class="showcase svg">
          <h1 class="color-tui-red">{{>icon_svg_superlativ name='booking' text='Barn från 1kr'}}</h1>
        </div>
        <div class="showcase-name" style="height: 37px">{{class}}</div>
      </div>
    </div>
  </div>

  <p>Eye catching blinking icon</p>


  <div class="sg-grid sg-container">
    <div class="sg-item">
      <div class="showcase-box">
        <div class="showcase svg">

          <p>{{>icon_wink}}</p>
        </div>
        <div class="showcase-name" style="height: 37px">{{class}}</div>
      </div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h2>Climate icons</h2>

  <div class="sg-grid sg-container">
    <div class="sg-item">
      <div class="showcase-box">
        <div class="showcase svg">
          {{>climate_notification text='Klimatkompenserat flyg & hotell'}}
        </div>
        <div class="showcase svg">
          {{>climate_notification_tab text='Klimatkompenserat flyg'}}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h2>Default svg sprite</h2>
  <div class="sg-grid sg-container">
    {{#each icon-svg}}
      <div class="sg-item icon {{this}}">
        <div class="showcase-box">
          <div class="showcase svg">
            {{>icon_svg name=this}}
          </div>
          <div class="showcase-name">{{this}}</div>
        </div>
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h2>Accommodation Only svg sprite</h2>
  <div class="sg-grid sg-container">
    {{#each icon-svg-accommodation-only}}
      <div class="sg-item icon {{this}}">
        <div class="showcase-box">
          <div class="showcase svg">
            {{>icon_svg name=this iconFile="svg-icons-accommodation-only"}}
          </div>
          <div class="showcase-name">{{this}}</div>
        </div>
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h2>All icons in brand</h2>
  <div class="sg-grid sg-container">
    {{#each icon-svg-source}}
    <div class="sg-item">
      <div class="showcase-box">
        <div class="showcase svg source">
          <svg class="pictogram pictogram-{{this}}">
            <title>{{this}}</title>
            <use xlink:href="/cdn/svg-source/svg-icons-source.svg#{{this}}" href="/cdn/svg-source/svg-icons-source.svg#{{this}}"></use>
          </svg>
        </div>
        <div class="showcase-name">{{this}}</div>
      </div>
    </div>
    {{/each}}
  </div>
</section>

<h3>Country Flags</h3>

<section class="sg-section">
  <div class="sg-grid sg-container">
    {{#each current-country-codes}}
    <div class="sg-item">
      <div class="showcase-box">
        <div class="showcase svg">
          {{>icon_flags_svg name=countryCode title=name}}
        </div>
        <div class="showcase-name">{{name}}</div>
      </div>
    </div>
    {{/each}}
  </div>
</section>

<h3>Airline images</h3>

<section class="sg-section">
  <div class="sg-grid sg-container">
    {{#each airlineMap}}
    <div class="sg-item">
      <div class="showcase-box">
        <div>
          {{#each images}}
          <img src="/cdn/logos/airlines/v2/{{this}}" alt=""/>
          {{/each}}
        </div>
        <div class="showcase-name">{{name}}</div>
      </div>
    </div>
    {{/each}}
  </div>
  </div>
</section>
<style>
  .cloud-loader-1,
  .cloud-loader-2,
  .cloud-loader-3 {
    display: none;
  }
</style>