2.17 #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="-4 -1.909 16 16">
   <path d="M6.7071 10.3838c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L2.4142 6.091l4.293 4.2928z"/>
  </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>
  <!-- checkmark -->
  <svg class="sb-icon sb-icon--checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
    <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <!-- arrow-dropdown -->
  <svg viewBox="0 0 11 6" class="sb-icon sb-icon--arrow-dropdown">
     <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
  </svg>
  <!-- private -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <path fill="#9CACBA" d="M6 5h2v-.994V5h2v-.994A2.003 2.003 0 0 0 8 2c-1.105 0-2 .898-2 2.006V5zm6 0a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2v-.994A4.003 4.003 0 0 1 8 0c2.21 0 4 1.795 4 4.006V5z"/>
 </svg>
  <!-- public -->
 <svg class="sb-icon" viewBox="0 0 12 16">
   <path fill="#9CACBA" d="M8.00006145,6 L8.00006145,4.15699538 C8.00006145,3.47863005 7.40765076,2.71551668 6.53538826,2.32716039 C5.28635471,1.77105483 3.82300032,2.33278395 3.26689475,3.5818175 C3.04226031,4.08635472 2.45114988,4.31326076 1.94661265,4.08862631 C1.44207543,3.86399187 1.21516939,3.27288143 1.43980384,2.76834421 C2.44517829,0.51023621 5.09075354,-0.50530498 7.34886154,0.500069476 C8.8915819,1.18693283 10.0000615,2.6148199 10.0000615,4.15699538 L10.0000615,6 C11.1046027,6.00003321 12,6.89545099 12,8 L12,14 C12,15.1045695 11.1045695,16 10,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,8 C0,6.8954305 0.8954305,6 2,6 L8.00006145,6 Z M6,13.0742734 C7.1045695,13.0742734 8,12.1788429 8,11.0742734 C8,9.96970393 7.1045695,9.07427343 6,9.07427343 C4.8954305,9.07427343 4,9.96970393 4,11.0742734 C4,12.1788429 4.8954305,13.0742734 6,13.0742734 Z"/>
 </svg>
  <!-- view -->
 <svg class="sb-icon" viewBox="0 0 16 14">
   <path d="M8 2C6.0025 2 4.1242 3.256 2.3403 6 4.1242 8.744 6.0025 10 8 10s3.8758-1.256 5.6597-4C11.8758 3.256 9.9975 2 8 2zm0 10c-3.0476 0-5.7143-2-8-6 2.2857-4 4.9524-6 8-6s5.7143 2 8 6c-2.2857 4-4.9524 6-8 6zM5.0112 5.7389C5.3028 5.905 5.6403 6 6 6c1.1046 0 2-.8954 2-2 0-.3597-.095-.6972-.2611-.9888A3.0392 3.0392 0 0 1 8 3c1.6569 0 3 1.3431 3 3S9.6569 9 8 9 5 7.6569 5 6c0-.088.0038-.175.0112-.2611z"/>
 </svg>
  <!-- edit -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <path d="M10.707 6.121L5.64 11.19a1 1 0 0 1-.538.279l-2.404.412a.5.5 0 0 1-.577-.577L2.532 8.9a1 1 0 0 1 .279-.538l5.068-5.068 2.828 2.828zM9.293 1.88L10.879.293a1 1 0 0 1 1.414 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.586 1.586L9.293 1.88zM2 14h12a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2z"/>
 </svg>
  <!-- settings -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <g>
     <path d="M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10zm0-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
     <path d="M5.89 0h2.22a.5.5 0 0 1 .485.379l.75 3A.5.5 0 0 1 8.86 4H5.14a.5.5 0 0 1-.485-.621l.75-3A.5.5 0 0 1 5.89 0zM5.89 14h2.22a.5.5 0 0 0 .485-.379l.75-3A.5.5 0 0 0 8.86 10H5.14a.5.5 0 0 0-.485.621l.75 3A.5.5 0 0 0 5.89 14z" />
     <path d="M.383 4.461l1.11-1.922a.5.5 0 0 1 .57-.23l2.973.85a.5.5 0 0 1 .296.73L3.472 7.11a.5.5 0 0 1-.78.11L.468 5.07a.5.5 0 0 1-.085-.609zM12.507 11.461l1.11-1.922a.5.5 0 0 0-.085-.61L11.308 6.78a.5.5 0 0 0-.78.11l-1.86 3.22a.5.5 0 0 0 .296.731l2.973.85a.5.5 0 0 0 .57-.23z" />
     <g>
       <path d="M12.507 2.539l1.11 1.922a.5.5 0 0 1-.085.61L11.308 7.22a.5.5 0 0 1-.78-.11l-1.86-3.22a.5.5 0 0 1 .296-.731l2.973-.85a.5.5 0 0 1 .57.23zM.383 9.539l1.11 1.922a.5.5 0 0 0 .57.23l2.973-.85a.5.5 0 0 0 .296-.73L3.472 6.89a.5.5 0 0 0-.78-.11L.468 8.93a.5.5 0 0 0-.085.609z" />
     </g>
   </g>
 </svg>
  <!-- smartphone -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M6,2 C5.44771525,2 5,2.44771525 5,3 L5,20 C5,20.5522847 5.44771525,21 6,21 L17,21 C17.5522847,21 18,20.5522847 18,20 L18,3 C18,2.44771525 17.5522847,2 17,2 L6,2 Z M6,0 L17,0 C18.6568542,0 20,1.34314575 20,3 L20,20 C20,21.6568542 18.6568542,23 17,23 L6,23 C4.34314575,23 3,21.6568542 3,20 L3,3 C3,1.34314575 4.34314575,0 6,0 Z M11.5,16 C12.3284271,16 13,16.6715729 13,17.5 C13,18.3284271 12.3284271,19 11.5,19 C10.6715729,19 10,18.3284271 10,17.5 C10,16.6715729 10.6715729,16 11.5,16 Z" id="a"/>
  </svg>
  <!-- monitor -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M2,13 L21,13 L21,5 C21,4.44771525 20.5522847,4 20,4 L3,4 C2.44771525,4 2,4.44771525 2,5 L2,13 Z M2,15 L2,16 C2,16.5522847 2.44771525,17 3,17 L20,17 C20.5522847,17 21,16.5522847 21,16 L21,15 L2,15 Z M10,21 L10,19 L3,19 C1.34314575,19 2.02906125e-16,17.6568542 0,16 L0,5 C-2.02906125e-16,3.34314575 1.34314575,2 3,2 L20,2 C21.6568542,2 23,3.34314575 23,5 L23,16 C23,17.6568542 21.6568542,19 20,19 L13,19 L13,21 L17,21 C17.5522847,21 18,21.4477153 18,22 C18,22.5522847 17.5522847,23 17,23 L6,23 C5.44771525,23 5,22.5522847 5,22 C5,21.4477153 5.44771525,21 6,21 L10,21 Z" id="a"/>
  </svg>
  <!-- mail -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M2,16.4712192 L6.96018373,11.1803565 L2,6.36464418 L2,16.4712192 Z M3.30823201,18 L19.691768,18 L14.6046407,12.5737309 L12.5448713,14.573507 C11.9628766,15.1385504 11.0371234,15.1385504 10.4551287,14.573507 L8.39535931,12.5737309 L3.30823201,18 Z M21,16.4712192 L21,6.36464418 L16.0398163,11.1803565 L21,16.4712192 Z M19.5344165,5 L3.46558351,5 L11.5,12.8004044 L19.5344165,5 Z M2,3 L21,3 C22.1045695,3 23,3.8954305 23,5 L23,18 C23,19.1045695 22.1045695,20 21,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,5 C-1.3527075e-16,3.8954305 0.8954305,3 2,3 Z" id="a"/>
  </svg>
 <!-- reset -->
<svg viewBox="0 0 16 16" width="16" height="16">
  <defs>
    <path d="M9.5.5A6.5 6.5 0 0 1 16 7l-.005.21.001.022c-.122 3.48-2.964 6.267-6.456 6.267h-.02-.02l-.03-.002-.24-.005a6.41 6.41 0 0 1-1.513-.255 1 1 0 1 1 .567-1.918c.4.118.815.18 1.24.18H9.5a4.5 4.5 0 0 0 4.495-4.288L14 7v-.012l-.005-.2a4.5 4.5 0 0 0-8.99 0L5 7h3l-4 4-4-4h3A6.5 6.5 0 0 1 9.5.5z" id="A"/>
  </defs>
  <g transform="translate(0 1)" fill-rule="evenodd">
    <mask id="B" fill="#fff">
      <use xlink:href="#A"/>
    </mask>
    <g fill="#9cacba">
      <use fill-rule="nonzero" xlink:href="#A"/>
      <g mask="url(#B)">
        <path d="M0-1h16v16H0z"/>
      </g>
    </g>
  </g>
</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