2.11 #Components.icons Icons

Toggle example guides Toggle HTML markup

The Stylabilla icon system is used by placing svg icons inline with the class sb-icon. Our approach is based on these articles.
If the icon is for decoration only, please add aria-hidden="true" to the icon. Otherwise please add a label - for instance aria-label="Delete".

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Markup 
<div class="kss-icons">
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M6.074 13.8l-.567-9.298a.387.387 0 0 0-.4-.374.387.387 0 0 0-.37.403l.567 9.298a.386.386 0 0 0 .4.374.387.387 0 0 0 .37-.402zm6.163.708c-.052.376-.345.712-.77.712H4.533c-.425 0-.711-.333-.77-.712l-.77-11.599h10.014l-.77 11.599zM6.074 2.328V.775h3.852v1.551H6.074zm4.622-.146V.728c0-.402-.345-.728-.77-.728H6.074c-.426 0-.77.326-.77.728v1.454H.385A.375.375 0 0 0 0 2.546c0 .2.173.363.385.363h1.837l.77 11.636c.125.796.69 1.455 1.541 1.455h6.934c.85 0 1.396-.667 1.54-1.455l.77-11.636h1.838c.212 0 .385-.162.385-.363a.375.375 0 0 0-.385-.364h-4.919zm.001 11.647l.559-9.298a.387.387 0 0 0-.371-.403.386.386 0 0 0-.399.374l-.559 9.3a.386.386 0 0 0 .77.028zm-2.312-.015V4.505A.386.386 0 0 0 8 4.117a.386.386 0 0 0-.385.388v9.31c0 .214.172.387.385.387a.386.386 0 0 0 .385-.388z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 9 16">
    <path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M6.176 7L3.5 9.676l.824.824L7 7.824 9.676 10.5l.824-.824L7.824 7 10.5 4.324 9.676 3.5 7 6.176 4.324 3.5l-.824.824L6.176 7zM7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0M5.579 10.5L2.625 6.827l1.309-1.304 1.645 1.996L10.733 3.5l.642.612L5.579 10.5"/>
  </svg>
  <svg class="sb-icon" viewBox="-5 -5 16 16">
    <path d="M0 0l3.5 4L7 0H0">
  </svg>
  <svg class="sb-icon" viewBox="0 0 13 16">
    <path d="M7.216 3.881V0L13 6l-5.784 6V8.034C.486 7.87.776 12.78 2.488 16-1.74 11.259-.842 3.663 7.216 3.881"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M9.806 11.622c-2.48 1.663-5.814 1.447-7.944-.683C-.568 8.51-.507 4.507 2 2c2.507-2.507 6.509-2.568 8.94-.138 2.129 2.13 2.345 5.465.682 7.944l3.58 3.581a1.283 1.283 0 1 1-1.815 1.815l-3.58-3.58zm.116-1.7c2.005-2.006 2.054-5.207.11-7.152C8.087.826 4.885.875 2.88 2.88s-2.054 5.207-.11 7.152c1.945 1.944 5.146 1.895 7.152-.11z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <g><circle cx="8" cy="14" r="2"></circle><circle cx="8" cy="8" r="2"></circle><circle cx="8" cy="2" r="2"></circle></g>
  </svg>
  </svg>
  <svg class="sb-icon" viewBox="0 0 40 40">
    <path d="M20 38.182C9.958 38.182 1.818 30.042 1.818 20 1.818 9.958 9.958 1.818 20 1.818c10.042 0 18.182 8.14 18.182 18.182 0 10.042-8.14 18.182-18.182 18.182M20 0C8.955 0 0 8.955 0 20s8.955 20 20 20 20-8.955 20-20S31.045 0 20 0m1.99 9.993c-.706 0-1.312.228-1.816.685-.506.457-.759 1.007-.759 1.651 0 .644.253 1.191.759 1.644.504.452 1.11.679 1.815.679.706 0 1.31-.227 1.81-.68.5-.452.751-1 .751-1.643 0-.644-.25-1.194-.75-1.65-.502-.458-1.105-.686-1.81-.686m.68 18.206c-.555 0-.947-.089-1.174-.267-.226-.178-.339-.512-.339-1.003 0-.195.035-.483.106-.864.069-.38.148-.719.235-1.015l1.075-3.695c.104-.338.176-.71.215-1.116.04-.407.06-.69.06-.852 0-.778-.283-1.41-.844-1.898-.563-.486-1.363-.729-2.4-.729-.576 0-1.187.1-1.832.298-.646.198-1.321.438-2.027.717l-.288 1.143c.21-.076.46-.156.753-.242.293-.084.58-.126.858-.126.568 0 .952.094 1.153.28.2.185.302.515.302.99 0 .262-.033.552-.098.87-.066.315-.147.654-.243 1.008l-1.08 3.707c-.095.39-.165.74-.208 1.049-.043.307-.065.61-.065.907 0 .762.29 1.39.868 1.885.58.495 1.392.742 2.437.742.68 0 1.276-.086 1.79-.26a56.473 56.473 0 0 0 2.064-.755l.287-1.143a5.12 5.12 0 0 1-.717.235c-.33.09-.626.134-.887.134"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 40 40">
    <path d="M17.5 28.182l-6.136-7.633 2.72-2.71 3.418 4.148 10.71-8.35 1.333 1.27-12.044 13.275m2.499 10C9.958 38.182 1.818 30.042 1.818 20 1.818 9.958 9.958 1.818 20 1.818c10.042 0 18.182 8.14 18.182 18.182 0 10.042-8.14 18.182-18.182 18.182M20 0C8.955 0 0 8.955 0 20s8.955 20 20 20 20-8.955 20-20S31.045 0 20 0"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M11.893 9.827l-3.636 3.484a.37.37 0 0 1-.257.102.37.37 0 0 1-.257-.102L4.107 9.827A.339.339 0 0 1 4 9.581c0-.193.163-.349.364-.349.1 0 .19.04.257.103l3.015 2.889V.348C7.636.156 7.8 0 8 0c.201 0 .364.156.364.348v11.876l3.015-2.89a.37.37 0 0 1 .257-.102c.201 0 .364.156.364.349a.34.34 0 0 1-.107.246zM16 15.665a.343.343 0 0 1-.35.335H.35a.343.343 0 0 1-.35-.335c0-.186.157-.336.35-.336h15.3c.193 0 .35.15.35.336z"/>
  </svg>
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM7 6V3H6v3H3v1h3v3h1V7h3V6H7z" />
  </svg>
  <!-- cross -->
  <svg class="sb-icon" viewBox="0 0 17 17">
    <path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
  </svg>
  <!-- back arrow -->
  <svg class="sb-icon sb-icon--arrow" viewBox="0 0 10 10">
    <g fill="none" stroke-linecap="round" stroke-width="2">
      <path stroke-linejoin="round" d="M5 1L1 5l4 4"/>
      <path d="M2 5h7"/>
    </g>
  </svg>
  <!-- down arrow -->
  <svg class="sb-icon" viewBox="0 0 9 11">
    <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
  </svg>
  <!-- status dot -->
  <svg class="sb-icon" viewBox="0 0 16 16">
    <circle cx="5.5" cy="6.5" r="5.5"/>
  </svg>
  <!-- calendar -->
  <svg class="sb-icon" viewBox="0 0 16 16">
    <path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z" />
  </svg>
  <!-- angle-arrow-down -->
  <svg class="sb-icon" viewBox="0 0 10 6">
    <path d="M5 3.586L8.293.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 1.707.293L5 3.586z" fill="#9CACBA" fill-rule="nonzero"/>
  </svg>
  <!-- angle-arrow-up -->
  <svg class="sb-icon" version="1.1" viewBox="0 0 10 6">
    <path d="M5 2.414l3.293 3.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L5 2.414z" fill="#9CACBA" fill-rule="nonzero"/>
  </svg>
</div>
<div class="kss-icons">
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
    <path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
    <path fill="#434343" d="M52 18.8c-.4-.4-.8-.8-1.2-.4l-4 1.6-10 4.8c-.4 0-.8.4-.8.8s.4 1.2.8 1.2h.4c1.2 2 2.8 3.2 5.2 3.2 3.2 0 6-2.8 6-6.4 0-.8 0-1.2-.4-2l3.6-1.6c.4-.4.4-.8.4-1.2zM12 18.8c.4-.4.8-.8 1.2-.4l4 1.6 10.4 4.8s.4.4.4.8-.4 1.2-1.2 1.2h-.4c-.8 2-2.4 3.2-4.8 3.2-3.2 0-6-2.8-6-6.4 0-.8 0-1.2.4-2L12.4 20c-.4-.4-.4-.8-.4-1.2zM46 51.6c-1.2 0-2-.8-2-2 0-7.2-9.6-8.4-12-8.4-1.2 0-12 .4-12 8.4 0 1.2-.8 2-2 2s-2-.8-2-2c0-8.8 8-12.4 16-12.4 5.2 0 16 3.2 16 12.4 0 1.2-.8 2-2 2z" />
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
    <path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
    <path fill="#434343" d="M46 51.6c-1.2 0-2-.8-2-2 0-7.2-9.6-8.4-12-8.4-1.2 0-12 .4-12 8.4 0 1.2-.8 2-2 2s-2-.8-2-2c0-8.8 8-12.4 16-12.4 5.2 0 16 3.2 16 12.4 0 1.2-.8 2-2 2zM48.8 24c-.4-2-2-6.4-9.2-6.4 0 0 2.8.8 4.8 2H44c-2.8 0-5.2 2.4-5.2 4.8 0 2.8 2.4 4.8 5.2 4.8s4.8-2.4 4.8-4.8V24zM15.2 24c.4-2 2-6.4 9.2-6.4 0 0-2.8.8-4.8 2 0 .4.4.4.4.4 2.8 0 5.2 2.4 5.2 4.8C24.8 28 22.8 30 20 30s-4.8-2-4.8-4.8V24z" />
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
    <path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
    <path fill="#434343" d="M24.4 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8 2.15-4.8 4.8-4.8 4.8 2.15 4.8 4.8zM48.8 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8S41.35 20 44 20s4.8 2.15 4.8 4.8zM48 45.2H16c-1.2 0-2-.8-2-2v-.4c0-1.2.8-2 2-2h32c1.2 0 2 .8 2 2v.4c0 1.2-.8 2-2 2z" />
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
    <path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
    <path fill="#434343" d="M24.4 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8 2.15-4.8 4.8-4.8 4.8 2.15 4.8 4.8zM48.8 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8S41.35 20 44 20s4.8 2.15 4.8 4.8zM50 37.6c-.4-.4-.8-.8-1.6-.4-6 2.8-11.6 3.6-16.4 3.6s-10.8-.8-16.4-3.6c-.4-.4-1.2 0-1.6.4s0 .8 0 1.2c6.4 10.8 12.4 14.4 17.6 14.4s11.6-3.6 17.6-14.4c.8-.4.8-.8.8-1.2z" />
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
    <path fill="#fff" d="M54 30.8c0 12-10 22-22 22s-22-9.6-22-22c0-12 10-22 22-22 12 .4 22 10 22 22z" />
    <path fill="#dc4541" d="M50.4 29.6c0 8.4-12 16.8-18.4 20.8C25.2 46 13.6 38 13.6 29.6c0 0-.8-11.2 10-11.2 4 0 6 1.6 8.4 4 2.4-2.8 4.4-4 8.4-4 10.8.4 10 11.2 10 11.2zM32 .4C14.4.4 0 14.4 0 32s14.4 31.6 32 31.6 32-14 32-31.6S49.6.4 32 .4z" />
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
    <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
    <g class="sb-icon--mood__lines" transform="translate(15 8.57)">
      <circle cx="6" cy="5.43" r="2"/>
      <path d="M.49 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 8.92 3l.56-.32c.52-.29.7-.95.42-1.48A1.07 1.07 0 0 0 8.44.76a288.24 288.24 0 0 0-4.68 2.69c-.64.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .5 4.4z"/>
    </g>
    <g class="sb-icon--mood__lines" transform="matrix(-1 0 0 1 15 8.57)">
      <circle cx="6" cy="5.43" r="2"/>
      <path d="M.88 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 9.3 3l.56-.32c.52-.29.7-.95.41-1.48A1.07 1.07 0 0 0 8.83.76a288.24 288.24 0 0 0-4.68 2.69c-.65.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .88 4.4z"/>
    </g>
    <path class="sb-icon--mood__lines" d="M20.75 21.35A7.41 7.41 0 0 0 15 19c-2.39 0-4.33.79-5.75 2.35a.96.96 0 0 0 .12 1.41 1.1 1.1 0 0 0 1.5-.11c1-1.1 2.34-1.65 4.13-1.65s3.14.55 4.14 1.65a1.1 1.1 0 0 0 1.49.11c.44-.36.5-.99.12-1.41z"/>
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
    <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
    <path class="sb-icon--mood__lines" d="M10.15 20.9c1.05-1.65 2.8-2.25 4.89-1.7 1.71.44 3.23 1.12 4.53 2.02.5.34.58.97.18 1.4-.4.44-1.13.5-1.62.16a11.67 11.67 0 0 0-3.76-1.67c-1.06-.27-1.68-.06-2.2.76-.32.48-1.02.66-1.58.39-.55-.27-.75-.88-.44-1.36z"/>
    <circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
    <circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
    <path class="sb-icon--mood__lines" d="M9.53 9.78a2.56 2.56 0 0 0 1.26-3.24c-.55-1.16-1.16.48-2.27 1.06-1.16.48-2.8-.1-2.27 1.06a2.56 2.56 0 0 0 3.28 1.12zm12.88 1.76a2.56 2.56 0 0 0 3.04-1.67c.33-1.24-1.2-.37-2.41-.64-1.2-.38-2.09-1.89-2.42-.65-.3 1.13.46 2.6 1.8 2.96z"/>
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
    <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
    <path class="sb-icon--mood__lines" d="M11.67 22h6.66c1.22 0 1.67-.45 1.67-1s-.45-1-1.67-1h-6.66c-1.22 0-1.67.45-1.67 1s.45 1 1.67 1z"/>
    <circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
    <circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
    <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
    <path class="sb-icon--mood__lines" d="M9 12c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0C6 13.64 7.34 12 9 12zm12 0c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0 0-1.56 1.34-3.2 3-3.2z"/>
    <path class="sb-icon--mood__lines" d="M9.25 21.65A7.41 7.41 0 0 0 15 24c2.39 0 4.33-.79 5.75-2.35a.96.96 0 0 0-.12-1.41 1.1 1.1 0 0 0-1.5.11A5.26 5.26 0 0 1 15 22a5.26 5.26 0 0 1-4.14-1.65 1.1 1.1 0 0 0-1.49-.11.96.96 0 0 0-.12 1.41z"/>
  </svg>
  <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
    <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
    <path class="sb-icon--mood__lines" d="M15 25c4.3 0 6-2.8 6-4.6 0-1.9-12-1.9-12 0 0 1.8 1.7 4.6 6 4.6z"/>
    <path class="sb-icon--mood__eyes" d="M19.3 16.9c1.9-.6 5.2-1.9 5.8-4 0 .1.8-2.5-2-3.3-.6-.2-1.2 0-2 .4-.4-.6-.7-1.1-1.4-1.3-2.8-.7-3.3 2-3.3 1.9-.6 2.1 1.7 4.9 3 6.3zm-8.9 0c1.3-1.4 3.6-4.2 3-6.3 0 0-.5-2.6-3.3-1.9-.7.2-1 .7-1.5 1.3-.7-.3-1.3-.6-2-.4-2.8.8-1.9 3.4-2 3.3.7 2.1 4 3.4 5.8 4z"/>
  </svg>
</div>
Source: components/_icons.scss, line 1