Button Style Tester

HTML

              
                <!-- SVG -->
  <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1140" height="20" viewBox="0 0 1140 20">
    <defs>

      <g id="ico-arrow-up">
        <polygon points="10.7,18 19.3,18 15,12 "></polygon>
      </g>

      <g id="ico-arrow-down">
        <polygon points="19.3,12 10.7,12 15,18 "></polygon>
      </g>

      <g id="ico-arrow-right">
        <polygon points="12,10.7 12,19.3 18,15 "></polygon>
      </g>

      <g id="ico-arrow-left">
        <polygon points="18,19.3 18,10.7 12,15 "></polygon>
      </g>

      <g id="ico-backup">
        <path d="M15.9,7C12.1,7,9,9.6,8.1,13.2l-2.1-0.7l2.4,4.8l3.2-4.4l-2.2,0.3c0.8-2.8,3.3-4.9,6.3-4.9l-0.4,5.8
        c-0.3,0.2-0.6,0.5-0.6,0.9c0,0.6,0.4,1,1,1c0.1,0,0.2,0,0.3-0.1l3.4,2.8l-2.8-3.4c0-0.1,0.1-0.2,0.1-0.3c0-0.4-0.2-0.7-0.6-0.9
        L16,8.3c3.6,0,6.6,3,6.6,6.7c0,3.7-3,6.7-6.7,6.7c-2.4,0-4.5-1.3-5.7-3.2l-1,1c1.4,2.1,3.9,3.5,6.6,3.5c4.4,0,8-3.6,8-8
        S20.3,7,15.9,7z"></path>
      </g>

      <g id="ico-bar-chart">
        <rect x="18.5" y="7" width="3" height="16"></rect>
        <rect x="13.5" y="11" width="3" height="12"></rect>
        <rect x="8.5" y="15" width="3" height="8"></rect>
      </g>

      <g id="ico-battery-full">
        <rect x="7" y="13" width="14" height="4"></rect>
        <path d="M24,13h-1v-1c0-0.6-0.4-1-1-1H6c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-1h1c0.6,0,1-0.4,1-1v-2
        C25,13.4,24.6,13,24,13z M22,18H6v-6h16V18z"></path>
      </g>

      <g id="ico-battery-medium">
        <rect x="7" y="13" width="10" height="4"></rect>
        <path d="M24,13h-1v-1c0-0.6-0.4-1-1-1H6c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-1h1c0.6,0,1-0.4,1-1v-2
        C25,13.4,24.6,13,24,13z M22,18H6v-6h16V18z"></path>
      </g>

      <g id="ico-battery-low">
        <rect x="7" y="13" width="5" height="4"></rect>
        <path d="M24,13h-1v-1c0-0.6-0.4-1-1-1H6c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-1h1c0.6,0,1-0.4,1-1v-2
        C25,13.4,24.6,13,24,13z M22,18H6v-6h16V18z"></path>
      </g>

      <g id="ico-battery-empty">
        <rect x="7" y="13" width="1" height="4"></rect>
        <path d="M24,13h-1v-1c0-0.6-0.4-1-1-1H6c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-1h1c0.6,0,1-0.4,1-1v-2
        C25,13.4,24.6,13,24,13z M22,18H6v-6h16V18z"></path>
      </g>

      <g id="ico-bell">
        <path d="M20,17c-0.6,0-1-0.4-1-1v-3c0-1.9-1.3-3.4-3-3.9V9c0-0.6-0.4-1-1-1s-1,0.4-1,1v0.1c-1.7,0.4-3,2-3,3.9v3c0,0.6-0.4,1-1,1
          s-1,0.4-1,1c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1C21,17.4,20.6,17,20,17z"></path>
        <path d="M15,22c1.1,0,2-0.9,2-2h-4C13,21.1,13.9,22,15,22z"></path>
      </g>

      <g id="ico-bell-off">
        <path d="M15.1,22c1.1,0,2-0.9,2-2h-4C13.1,21.1,14,22,15.1,22z"></path>
        <path d="M20.1,17c-0.6,0-1-0.4-1-1v-1.4L12.8,19h7.3c0.6,0,1-0.4,1-1C21.1,17.4,20.7,17,20.1,17z"></path>
        <path d="M21.8,9.2l-3.1,2.2c-0.5-1.1-1.5-1.9-2.6-2.2V9c0-0.6-0.4-1-1-1s-1,0.4-1,1v0.1c-1.7,0.4-3,2-3,3.9v3
          c0,0.6-0.4,1-1,1s-1,0.4-1,1c0,0.1,0,0.2,0.1,0.3l-1.6,1.1l0.6,0.8L22.4,10L21.8,9.2z"></path>
      </g>

      <g id="ico-book">
        <path d="M21.5,7h-11l-2,2v14h11v-2h2V7z M20.5,20h-1V9H9.9l1-1h9.6V20z"></path>
      </g>

      <g id="ico-book-open">
        <path d="M24.8,7.4c-0.8-0.6-2.1-0.9-3.4-0.9c-2.6,0-5.6,0.8-6.3,1c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.7-0.2-3.6-1-6.3-1
          C7.2,6.5,6,6.7,5.2,7.4C5.1,7.4,5,7.6,5,7.7v14.8c0,0.3,0.2,0.5,0.5,0.5c0.1,0,0.1,0,0.2,0c0.8-0.4,1.8-0.5,2.9-0.5
          c2.6,0,5.6,0.8,6.3,1c0,0,0.1,0,0.1,0s0.1,0,0.1,0c0.7-0.2,3.6-1,6.3-1c1.1,0,2.1,0.1,2.9,0.5c0.1,0,0.1,0,0.2,0
          c0.3,0,0.5-0.2,0.5-0.5V7.7C25,7.6,24.9,7.4,24.8,7.4z M6,21.8V8c0.4-0.2,1.2-0.5,2.6-0.5c2.4,0,5.2,0.7,5.9,0.9v13.9
          c-1.3-0.3-3.7-0.8-5.9-0.8C7.6,21.5,6.7,21.6,6,21.8z M24,21.8c-0.7-0.2-1.6-0.3-2.6-0.3c-2.2,0-4.6,0.5-5.9,0.8V8.4
          c0.7-0.2,3.5-0.9,5.9-0.9c1.4,0,2.2,0.2,2.6,0.5V21.8z"></path>
        <path d="M19.3,15.3c-0.8,0.1-1.4,0.3-1.9,0.5C17,15.9,16.7,16,16.5,16v1c0.4,0,0.8-0.1,1.2-0.3c0.5-0.2,1-0.3,1.7-0.4
          c0.9-0.1,1.5-0.1,2.2,0c0.4,0,0.8,0,1.3,0v-1c-0.5,0-0.9,0-1.3,0C21,15.2,20.3,15.2,19.3,15.3z"></path>
        <path d="M19.3,19.5c-0.8,0.1-1.4,0.3-1.9,0.5c-0.4,0.1-0.7,0.2-0.9,0.2v1c0.4,0,0.8-0.1,1.2-0.3c0.5-0.2,1-0.3,1.7-0.4
          c0.9-0.1,1.5-0.1,2.2,0c0.4,0,0.8,0,1.3,0v-1c-0.5,0-0.9,0-1.3,0C21,19.4,20.3,19.3,19.3,19.5z"></path>
        <path d="M12.6,9.5c-0.5-0.2-1.1-0.4-1.9-0.5C9.7,8.9,9,8.9,8.3,9C7.9,9,7.5,9,7,9v1c0.5,0,0.9,0,1.3,0c0.7,0,1.3-0.1,2.2,0
          c0.7,0.1,1.2,0.3,1.7,0.4c0.4,0.2,0.8,0.3,1.2,0.3v-1C13.3,9.7,13,9.6,12.6,9.5z"></path>
        <path d="M10.7,17.4c-1-0.1-1.7-0.1-2.4-0.1c-0.4,0-0.8,0-1.3,0v1c0.5,0,0.9,0,1.3,0c0.7,0,1.3-0.1,2.2,0c0.7,0.1,1.2,0.3,1.7,0.4
          c0.4,0.2,0.8,0.3,1.2,0.3v-1c-0.2,0-0.5-0.1-0.9-0.2C12.1,17.7,11.5,17.5,10.7,17.4z"></path>
        <path d="M10.5,12.1c0.6,0.1,1,0.2,1.4,0.3v-1c-0.4-0.1-0.8-0.2-1.3-0.3C9.7,11,9,11,8.3,11.1c-0.4,0-0.8,0-1.3,0v1
          c0.5,0,0.9,0,1.3,0C9,12,9.6,12,10.5,12.1z"></path>
        <path d="M10.5,14.2c0.7,0.1,1.2,0.3,1.7,0.4c0.1,0,0.2,0.1,0.3,0.1v-1.1c-0.5-0.2-1.1-0.4-1.9-0.5c-1-0.1-1.7-0.1-2.4-0.1
          c-0.4,0-0.8,0-1.3,0v1c0.5,0,0.9,0,1.3,0C9,14.1,9.6,14.1,10.5,14.2z"></path>
        <path d="M10.5,16.3c0.1,0,0.1,0,0.2,0v-1c0,0,0,0,0,0c-1-0.1-1.7-0.1-2.4-0.1c-0.4,0-0.8,0-1.3,0v1c0.5,0,0.9,0,1.3,0
          C9,16.2,9.6,16.2,10.5,16.3z"></path>
        <path d="M8.3,19.4c-0.4,0-0.8,0-1.3,0v1c0.5,0,0.9,0,1.3,0c0.7,0,1.3-0.1,2.2,0c0.6,0.1,1,0.2,1.4,0.3v-1c-0.4-0.1-0.8-0.2-1.3-0.3
          C9.7,19.3,9,19.4,8.3,19.4z"></path>
        <path d="M19.5,10c0.7-0.1,1.3-0.1,1.9-0.1v-1c-0.6,0-1.2,0-2,0.1c-0.8,0.1-1.4,0.3-1.9,0.5c-0.4,0.1-0.7,0.2-0.9,0.2v1
          c0.4,0,0.8-0.1,1.2-0.3C18.2,10.3,18.7,10.1,19.5,10z"></path>
        <path d="M19.3,11.1c-0.8,0.1-1.4,0.3-1.9,0.5c-0.4,0.1-0.7,0.2-0.9,0.2v1c0.4,0,0.8-0.1,1.2-0.3c0.5-0.2,1-0.3,1.7-0.4
          c0.9-0.1,1.5-0.1,2.2,0c0.2,0,0.5,0,0.8,0v-1c-0.3,0-0.5,0-0.7,0C21,11,20.3,11,19.3,11.1z"></path>
        <path d="M19.5,14.2c0.2,0,0.4,0,0.5-0.1v-1c-0.2,0-0.4,0-0.7,0.1c-0.8,0.1-1.4,0.3-1.9,0.5c-0.4,0.1-0.7,0.2-0.9,0.2v1
          c0.4,0,0.8-0.1,1.2-0.3C18.2,14.5,18.7,14.3,19.5,14.2z"></path>
        <path d="M19.5,18.4c0.6-0.1,1-0.1,1.5-0.1v-1c-0.5,0-1,0-1.6,0.1c-0.8,0.1-1.4,0.3-1.9,0.5c-0.4,0.1-0.7,0.2-0.9,0.2v1
          c0.4,0,0.8-0.1,1.2-0.3C18.2,18.7,18.7,18.5,19.5,18.4z"></path>
      </g>

      <g id="ico-bookmark">
        <polygon points="10,9 10,21 15,18 20,21 20,9 "></polygon>
      </g>

      <g id="ico-bug">
        <path d="M18.5,19c0.1-0.5,0.2-1.1,0.2-1.7l1.5,0.3l2.1-1.3l-0.5-0.8L20,16.5l-1.3-0.2c0-0.6-0.2-1.2-0.3-1.7l2-0.8l1.1-2.2l-0.9-0.4
        l-0.9,1.8L18,13.7c-0.2-0.5-0.5-0.9-0.8-1.2c0.5-0.5,0.8-1.3,0.8-2.1c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3c0,0.8,0.3,1.5,0.8,2.1
        c-0.3,0.3-0.6,0.7-0.8,1.2l-1.7-0.7l-0.9-1.8l-0.9,0.4l1.1,2.2l2,0.8c-0.2,0.5-0.3,1.1-0.3,1.7L10,16.5l-1.7-1.1l-0.5,0.8l2.1,1.3
        l1.5-0.3c0,0.6,0.1,1.1,0.2,1.7L10,19.9l-0.7,2.3l1,0.3l0.6-2l1-0.6c0.7,1.6,1.8,2.6,3.1,2.6s2.5-1,3.1-2.6l1,0.6l0.6,2l1-0.3
        L20,19.9L18.5,19z"></path>
      </g>

      <g id="ico-calculator">
        <path d="M7.5,5v5v15h15V10V5H7.5z M11.5,23h-2v-2h2V23z M11.5,20h-2v-2h2V20z M11.5,17h-2v-2h2V17z M11.5,14h-2v-2h2V14z M14.5,23
          h-2v-2h2V23z M14.5,20h-2v-2h2V20z M14.5,17h-2v-2h2V17z M14.5,14h-2v-2h2V14z M20.5,23h-5v-2h5V23z M17.5,15v2h-2v-2H17.5z
           M15.5,14v-2h2v2H15.5z M17.5,18v2h-2v-2H17.5z M20.5,20h-2v-2h2V20z M20.5,17h-2v-2h2V17z M20.5,14h-2v-2h2V14z M21.5,10h-13V6h13
          V10z"></path>
      </g>

      <g id="ico-calendar">
        <path d="M7,9v12h16V9H7z M19,14h-2v-2h2V14z M11,15h2v2h-2V15z M10,17H8v-2h2V17z M16,14h-2v-2h2V14z M13,14h-2v-2h2
        V14z M14,15h2v2h-2V15z M17,15h2v2h-2V15z M10,12v2H8v-2H10z M8,20v-2h2v2H8z M11,20v-2h2v2H11z M14,20v-2h2v2H14z M17,20v-2h2v2H17
        z M22,20h-2v-2h2V20z M22,17h-2v-2h2V17z M22,14h-2v-2h2V14z"></path>
      </g>

      <g id="ico-camera">
        <path d="M19,11l-1-3h-6l-1,3H9v-1H7v1H6v9h4.5c1.1,1.2,2.7,2,4.5,2c1.8,0,3.4-0.8,4.5-2H24v-9H19z M15,20c-2.2,0-4-1.8-4-4
          s1.8-4,4-4c2.2,0,4,1.8,4,4S17.2,20,15,20z"></path>
        <circle cx="15" cy="16" r="2"></circle>
      </g>

      <g id="ico-cancel">
        <path d="M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8c4.4,0,8-3.6,8-8S19.4,7,15,7z M15,9c1.3,0,2.5,0.4,3.5,1.1l-8.4,8.4C9.4,17.5,9,16.3,9,15
        C9,11.7,11.7,9,15,9z M15,21c-1.3,0-2.5-0.4-3.5-1.1l8.4-8.4c0.7,1,1.1,2.2,1.1,3.5C21,18.3,18.3,21,15,21z"></path>
      </g>

      <g id="ico-check">
        <polygon points="13,20.1 8.3,15.4 9.7,13.9 13,17.2 20.3,9.9 21.7,11.4   "></polygon>
      </g>

      <g id="ico-checkbox">
        <path d="M20,10v10H10V10H20 M21,9H9v12h12V9L21,9z"></path>
      </g>

      <g id="ico-checked">
        <polygon points="20,20 10,20 10,10 19.5,10 20.5,9 9,9 9,21 21,21 21,14.2 20,15.2    "></polygon>
        <polygon points="12.4,11.9 11,13.4 15.7,18.1 24.4,9.4 23,7.9 15.7,15.2    "></polygon>
      </g>

      <g id="ico-chevron-up">
        <polygon points="20.3,19.1 15,13.8 9.7,19.1 8.3,17.6 15,10.9 21.7,17.6  "></polygon>
      </g>

      <g id="ico-chevron-down">
        <polygon points="15,19.1 8.3,12.4 9.7,10.9 15,16.2 20.3,10.9 21.7,12.4  "></polygon>
      </g>

      <g id="ico-chevron-right">
        <polygon points="12.4,21.7 10.9,20.3 16.2,15 10.9,9.7 12.4,8.3 19.1,15  "></polygon>
      </g>

      <g id="ico-chevron-left">
        <polygon points="17.6,21.7 10.9,15 17.6,8.3 19.1,9.7 13.8,15 19.1,20.3  "></polygon>
      </g>

      <g id="ico-circle">
        <path d="M15,23c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S19.4,23,15,23z M15,9c-3.3,0-6,2.7-6,6s2.7,6,6,6c3.3,0,6-2.7,6-6
        S18.3,9,15,9z"></path>
      </g>

      <g id="ico-circle-filled">
        <path d="M15,23c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S19.4,23,15,23z"></path>
      </g>

      <g id="ico-clipboard">
        <rect x="11" y="11.5" width="7" height="1"></rect>
        <rect x="11" y="13.5" width="8" height="1"></rect>
        <rect x="11" y="15.5" width="5" height="1"></rect>
        <rect x="11" y="17.5" width="7" height="1"></rect>
        <rect x="11" y="19.5" width="3.2" height="1"></rect>
        <path d="M20,8.5h-2v-1c0-0.6-0.4-1-1-1h-4c-0.6,0-1,0.4-1,1v1h-2c-0.6,0-1,0.4-1,1v13c0,0.6,0.4,1,1,1h10
          c0.6,0,1-0.4,1-1v-13C21,8.9,20.6,8.5,20,8.5z M15,7.5c0.4,0,0.8,0.3,0.8,0.8C15.8,8.7,15.4,9,15,9s-0.8-0.3-0.8-0.8
          C14.2,7.8,14.6,7.5,15,7.5z M20,22.5H10v-13h1c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1h1V22.5z"></path>
      </g>

      <g id="ico-clock">
        <path d="M15,7C15,7,15,7,15,7L15,7L15,7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C23,10.6,19.4,7,15,7z M18.7,20.9L18,19.6
        l-0.4,0.2l0.7,1.3c-0.9,0.5-1.9,0.8-3,0.8l0-1.5h-0.5l0,1.5c-1.1,0-2.1-0.3-3-0.8l0.7-1.3L12,19.6l-0.7,1.3
        c-0.9-0.6-1.7-1.3-2.2-2.2l1.3-0.7l-0.2-0.4l-1.3,0.7c-0.5-0.9-0.8-1.9-0.8-3l1.5,0v-0.5l-1.5,0c0-1.1,0.3-2.1,0.8-3l1.3,0.7
        l0.2-0.4l-1.3-0.7c0.6-0.9,1.3-1.7,2.2-2.2l0.7,1.3l0.4-0.2l-0.7-1.3c0.9-0.5,1.9-0.8,3-0.8l0,1.5h0.1l-0.3,4.6
        C14.2,14.3,14,14.6,14,15c0,0.6,0.4,1,1,1c0.1,0,0.2,0,0.3-0.1l3.4,2.8l-2.8-3.4c0-0.1,0.1-0.2,0.1-0.3c0-0.4-0.2-0.7-0.6-0.9
        l-0.3-4.6h0.1l0-1.5c1.1,0,2.1,0.3,3,0.8l-0.7,1.3l0.4,0.2l0.7-1.3c0.9,0.6,1.7,1.3,2.2,2.2L19.6,12l0.2,0.4l1.3-0.7
        c0.5,0.9,0.8,1.9,0.8,3l-1.5,0v0.5l1.5,0c0,1.1-0.3,2.1-0.8,3l-1.3-0.7L19.6,18l1.3,0.7C20.4,19.6,19.6,20.4,18.7,20.9z"></path>
      </g>

      <g id="ico-close">
        <polygon points="19.7,11.7 18.3,10.3 15,13.6 11.7,10.3 10.3,11.7 13.6,15 10.3,18.3 11.7,19.7 15,16.4 18.3,19.7 19.7,18.3
        16.4,15 "></polygon>
      </g>

      <g id="ico-close-circle">
        <path d="M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8c4.4,0,8-3.6,8-8S19.4,7,15,7z M19.2,17.8l-1.4,1.4L15,16.4l-2.8,2.8l-1.4-1.4l2.8-2.8
        l-2.8-2.8l1.4-1.4l2.8,2.8l2.8-2.8l1.4,1.4L16.4,15L19.2,17.8z"></path>
      </g>

      <g id="ico-cloud">
        <path d="M20,14c-0.4,0-0.7,0.1-1,0.2c0-0.1,0-0.1,0-0.2c0-1.1-0.9-2-2-2c-0.4,0-0.9,0.2-1.2,0.4C15.3,11,14,10,12.5,10
        C10.6,10,9,11.6,9,13.5c0,0.2,0,0.4,0.1,0.7C7.9,14.6,7,15.7,7,17c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3S21.7,14,20,14z"></path>
      </g>

      <g id="ico-code">
        <polygon points="8.2,15 11.2,12 9.8,10.6 5.4,15 9.8,19.4 11.2,18  "></polygon>
        <polygon points="20.2,10.6 18.8,12 21.8,15 18.8,18 20.2,19.4 24.6,15  "></polygon>
        <rect x="6.5" y="14" transform="matrix(0.3509 -0.9364 0.9364 0.3509 -4.3109 23.7812)" width="17.1" height="2"></rect>
      </g>

      <g id="ico-codepen">
        <path d="M23.7,11.6l-8.2-5.5C15.3,6,15.1,6,15,6s-0.3,0-0.4,0.1l-8.2,5.5C6.2,11.7,6,12,6,12.3v5.5c0,0.3,0.2,0.5,0.3,0.6l8.2,5.5
        C14.7,24,14.9,24,15,24s0.3,0,0.4-0.1l8.2-5.5c0.2-0.1,0.3-0.4,0.3-0.6v-5.5C24,12,23.8,11.7,23.7,11.6z M15.8,8.2l6.1,4l-2.7,1.8
        l-3.4-2.2V8.2z M14.2,8.2v3.6l-3.4,2.2l-2.7-1.8L14.2,8.2z M7.5,13.7L9.5,15l-1.9,1.3V13.7z M14.2,21.8l-6.1-4l2.7-1.8l3.4,2.2V21.8
        z M15,16.8L12.3,15l2.7-1.8l2.7,1.8L15,16.8z M15.8,21.8v-3.6l3.4-2.2l2.7,1.8L15.8,21.8z M22.5,16.3L20.5,15l1.9-1.3V16.3z"></path>
      </g>

      <g id="ico-computer">
        <path d="M22.8,19.6l-0.9-1.3C22,18.2,22,18.1,22,18v-8c0-0.3-0.2-0.5-0.5-0.5H8.5C8.2,9.5,8,9.7,8,10v8
        c0,0.1,0.1,0.2,0.1,0.3l-1,1.4C7,19.9,7,20.1,7,20.2c0.1,0.2,0.3,0.3,0.4,0.3h15c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5
        C23,19.8,22.9,19.7,22.8,19.6z M9,10.5H21v7H9V10.5z"></path>
      </g>

      <g id="ico-contract">
        <polygon points="11.5,7.8 11.8,10.3 7.4,6 6.7,6.7 6,7.4 10.3,11.8 7.8,11.5 7.6,13.5 14.2,14.2 13.5,7.6  "></polygon>
        <polygon points="22.2,11.5 19.7,11.8 24,7.4 23.3,6.7 22.6,6 18.2,10.3 18.5,7.8 16.5,7.6 15.8,14.2 22.4,13.5   "></polygon>
        <polygon points="7.8,18.5 10.3,18.2 6,22.6 6.7,23.3 7.4,24 11.8,19.7 11.5,22.2 13.5,22.4 14.2,15.8 7.6,16.5   "></polygon>
        <polygon points="22.2,18.5 22.4,16.5 15.8,15.8 16.5,22.4 18.5,22.2 18.2,19.7 22.6,24 23.3,23.3 24,22.6 19.7,18.2  "></polygon>
      </g>

      <g id="ico-credit-card">
        <path d="M21,9.5H9c-1.1,0-2,0.9-2,2v7c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-7C23,10.4,22.1,9.5,21,9.5z M9,10.5h12c0.6,0,1,0.4,1,1
        v1H8v-1C8,10.9,8.4,10.5,9,10.5z M21,19.5H9c-0.6,0-1-0.4-1-1v-4h14v4C22,19.1,21.6,19.5,21,19.5z"></path>
      </g>

      <g id="ico-credit-card-add">
        <path d="M21.5,18.5c0,0.6-0.4,1-1,1h-11c-0.6,0-1-0.4-1-1v-4h11v-2h-11v-1c0-0.6,0.4-1,1-1h7v-1h-7c-1.1,0-2,0.9-2,2v7
          c0,1.1,0.9,2,2,2h11c1.1,0,2-0.9,2-2v-3h-1V18.5z"></path>
        <polygon points="22.5,9.5 22.5,6.5 20.5,6.5 20.5,9.5 17.5,9.5 17.5,11.5 20.5,11.5 20.5,14.5 22.5,14.5 22.5,11.5 25.5,11.5
          25.5,9.5  "></polygon>
      </g>

      <g id="ico-crop">
        <rect x="17.5" y="20.5" width="2" height="2"></rect>
        <polygon points="19.5,17.5 19.5,11.2 21.6,9.1 20.9,8.4 18.8,10.5 13.5,10.5 13.5,12.5 16.8,12.5 13.5,15.8 13.5,16.5 14.2,16.5
          17.5,13.2 17.5,17.5 12.5,17.5 12.5,7.5 10.5,7.5 10.5,10.5 7.5,10.5 7.5,12.5 10.5,12.5 10.5,19.5 22.5,19.5 22.5,17.5   "></polygon>
      </g>

      <g id="ico-delete">
        <path d="M11,10l-4,5l4,5h12V10H11z M20,17L19,18l-2-2l-2,2L14,17l2-2l-2-2L15,12l2,2l2-2L20,13l-2,2L20,17z"></path>
      </g>

      <g id="ico-document">
        <path d="M17,7H9v16h12V11L17,7z M20,22H10V8h6v4h4V22z"></path>
      </g>

      <g id="ico-dollar">
        <path d="M15.8,14.2v-3.1c0.6,0.2,1,0.7,1.1,1.4l1.9-0.6c-0.3-1.5-1.4-2.6-3-2.8V7.5h-1.5v1.6c-2,0.3-3.1,1.9-3.1,3.4
        c0,2.1,1.7,2.8,3.1,3.3v3.1c-0.6-0.2-1-0.7-1.1-1.4l-1.9,0.6c0.3,1.5,1.4,2.6,3,2.8v1.6h1.5v-1.6c1.9-0.3,3.1-1.6,3.1-3.4
        C18.9,15.4,17.2,14.7,15.8,14.2z M14.2,13.7c-0.8-0.3-1.1-0.6-1.1-1.2c0-0.6,0.3-1.2,1.1-1.4V13.7z M15.8,18.9v-2.6
        c0.8,0.3,1.1,0.6,1.1,1.2C16.9,18.3,16.5,18.7,15.8,18.9z"></path>
      </g>

      <g id="ico-download">
        <polygon points="19.7,15.3 18.3,13.9 16,16.2 16,7 14,7 14,16.2 11.7,13.9 10.3,15.3 15,20  "></polygon>
        <rect x="7" y="21" width="16" height="2"></rect>
      </g>

      <g id="ico-dribbble">
        <path d="M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S19.4,7,15,7z M22,15C22,15,22,15,22,15c-1.8-0.5-3.5-0.6-5.1-0.3
        c-0.2-0.5-0.4-0.9-0.6-1.4c1.7-0.7,3.1-1.7,4.1-2.9C21.4,11.7,22,13.3,22,15z M19.6,9.7c-0.9,1.1-2.2,2-3.8,2.7
        C15,11,14.1,9.6,13.1,8.3C13.7,8.1,14.3,8,15,8C16.8,8,18.4,8.7,19.6,9.7z M12.1,8.6c1,1.3,1.9,2.7,2.7,4.2
        c-1.9,0.6-4.1,0.9-6.7,0.9C8.6,11.4,10.1,9.5,12.1,8.6z M8,15c0-0.1,0-0.2,0-0.3c0,0,0.1,0,0.1,0c2.7,0,5.1-0.4,7.1-1
        c0.2,0.4,0.4,0.9,0.6,1.3c-2.4,0.7-4.5,2.4-6,4.8C8.7,18.5,8,16.8,8,15z M10.6,20.5c1.4-2.3,3.4-3.9,5.6-4.6
        c0.7,1.8,1.2,3.6,1.5,5.5C17,21.8,16,22,15,22C13.4,22,11.8,21.4,10.6,20.5z M18.7,20.9c-0.3-1.8-0.8-3.5-1.5-5.2
        c1.5-0.3,3.1-0.1,4.7,0.4C21.6,18.1,20.4,19.8,18.7,20.9z"></path>
      </g>

      <g id="ico-earth">
        <path d="M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8c4.4,0,8-3.6,8-8S19.4,7,15,7z M18.7,11.1c-0.2,0-0.7-1.9-0.7-2.2c0-0.1-0.1-0.2-0.2-0.3
        c0.7,0.3,1.4,0.8,2,1.3l0,0c0,0.2,0,0.5-0.2,0.5C19.3,10.4,19,11.1,18.7,11.1z M21.4,16.9c-0.2,0-0.4,0.4-0.7-0.5s0.8-2,0.7-2.1
        s-0.5-0.5-0.4-0.7s0.3-0.1,0.3-0.3c0-0.1,0.1-0.5,0.2-0.8l0,0c0.3,0.8,0.5,1.6,0.5,2.5c0,0.7-0.1,1.4-0.3,2
        C21.6,16.9,21.5,16.9,21.4,16.9z M15,8c0.7,0,1.3,0.1,1.9,0.3h0C17,8.5,17,8.7,17,8.8c0,0.3-0.2,0.9-0.4,0.8s-0.9,0.1-1.2,0.2
        s-0.7,0.5-0.8,0.7s0.5,0.7,0.8,0.8s0.3,0,0.5-0.4s0.6-0.5,0.9-0.4s0.8,1,1,1.3s-0.3,1-0.7,1s-1,0.3-1.2,0.5s-0.9,1-1.1,1.2
        s0.3,0.8,0,0.9c-0.4,0.2-0.3-0.5-0.5-0.7s-1.1,0-1.3,0.3c-0.1,0.2-0.3,0.7-0.1,0.9c0.2,0.2,0.9-0.3,1,0c0.1,0.3,0.9,1.2,1.1,1.3
        s1-0.1,1.3-0.1s0.8,0.4,1,0.4s0.2,0.7,0.5,0.7s1.2,0.2,1.2,0.4S18.9,19,18.8,19s-0.2,1-0.3,1s-0.7,0-0.8,0.2s-1.1,1.1-1.2,1.2
        c-0.1,0-0.2,0.3-0.4,0.5c0,0,0,0,0,0c-0.1,0-0.3,0-0.4,0.1c-0.1-0.3,0-0.8,0-1c0.1-0.3,0.2-1-0.2-1.2s-0.9-0.9-0.9-1.2
        s0.4-1,0.3-1.2s-0.6,0-0.8-0.2s-0.6-0.5-0.9-0.6s-1.1-0.2-1.2-0.6s-1.3-1.9-1.5-2.2s0.3-1.5,0.4-1.8s0-1.4-0.2-1.7S10,11,9.8,10.9
        c-0.1-0.1-0.1-0.3,0-0.6C11.1,8.9,13,8,15,8z"></path>
      </g>

      <g id="ico-edit">
        <polygon points="20,20 10,20 10,10 16.1,10 17.1,9 9,9 9,21 21,21 21,13 20,14  "></polygon>
        <path d="M23.2,7.6l-0.7-0.7c-0.5-0.5-1.3-0.5-1.8,0l-0.4,0.4l-6.3,6.3L12,18l4.4-1.9l6.3-6.3l0.4-0.4C23.7,8.9,23.7,8.1,23.2,7.6z"></path>
      </g>

      <g id="ico-eject">
        <polygon points="21,17 15,9 9,17  "></polygon>
        <rect x="9" y="19" width="12" height="2"></rect>
      </g>

      <g id="ico-eraser">
        <polygon points="14.8,15.5 22.2,9 15,9 7.6,15.5   "></polygon>
        <polygon points="15.5,16.2 15.5,20.5 23,14 23,9.6   "></polygon>
        <rect x="7" y="16.5" width="7.5" height="4.5"></rect>
      </g>

      <g id="ico-expand">
        <polygon points="12.4,8.7 12.6,6.7 6,6 6.7,12.6 8.7,12.4 8.4,9.8 12.8,14.2 13.5,13.5 14.2,12.8 9.8,8.4  "></polygon>
        <polygon points="16.5,13.5 17.2,14.2 21.6,9.8 21.3,12.4 23.3,12.6 24,6 17.4,6.7 17.6,8.7 20.2,8.4 15.8,12.8   "></polygon>
        <polygon points="13.5,16.5 12.8,15.8 8.4,20.2 8.7,17.6 6.7,17.4 6,24 12.6,23.3 12.4,21.3 9.8,21.6 14.2,17.2   "></polygon>
        <polygon points="21.3,17.6 21.6,20.2 17.2,15.8 16.5,16.5 15.8,17.2 20.2,21.6 17.6,21.3 17.4,23.3 24,24 23.3,17.4  "></polygon>
      </g>

      <g id="ico-eye">
        <path d="M15,10c-3,0-5.2,2-7,5c1.8,3,4,5,7,5s5.2-2,7-5C20.2,12,18,10,15,10z M15,18.5c-1.9,0-3.5-1.6-3.5-3.5
          s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S16.9,18.5,15,18.5z"></path>
        <circle cx="15" cy="15" r="1.5"></circle>
      </g>

      <g id="ico-eye-off">
        <path d="M19.4,11.7l-1.2,2c0.1,0.4,0.2,0.8,0.2,1.2c0,1.7-1.2,3.2-2.9,3.4L14.7,20c0.1,0,0.2,0,0.3,0c3,0,5.2-2,7-5
          C21.2,13.7,20.4,12.6,19.4,11.7z"></path>
        <path d="M18.6,7.8l-1.5,2.6C16.4,10.1,15.7,10,15,10c-3,0-5.2,2-7,5c1.1,1.9,2.4,3.4,4,4.2l-1.4,2.5l0.9,0.5l8-14
          L18.6,7.8z M11.5,15c0-1.9,1.6-3.5,3.5-3.5c0.5,0,0.9,0.1,1.3,0.3l-1,1.8c-0.1,0-0.2,0-0.3,0c-0.8,0-1.5,0.7-1.5,1.5
          c0,0.4,0.1,0.7,0.4,1l-1,1.8C12,17.1,11.5,16.1,11.5,15z"></path>
      </g>

      <g id="ico-facebook">
        <path d="M16.2,22.6H13V15h-1.6v-2.6H13v-1.6c0-2.1,0.9-3.4,3.4-3.4h2.1V10h-1.3c-1,0-1,0.4-1,1l0,1.3h2.4L18.3,15h-2.1V22.6z"></path>
      </g>

      <g id="ico-fast-forward">
        <polygon points="9,19 15,15 9,11  "></polygon>
        <polygon points="21,15 15,11 15,15 15,19  "></polygon>
      </g>

      <g id="ico-filter">
        <path d="M7,8v1.5c0,0.3,0.1,0.6,0.3,0.8L14,16v6l2-1v-5l6.7-5.7c0.2-0.2,0.3-0.5,0.3-0.8V8H7z"></path>
      </g>

      <g id="ico-flag">
        <polygon points="15,9 15,7 9,9 9,7 8,7 8,23 9,23 9,18 15,16 15,18 22,16 22,7 "></polygon>
      </g>

      <g id="ico-folder">
        <path d="M23.5,9.5h-1c0-0.6-0.4-1-1-1h-4c-0.6,0-1,0.4-1,1H9.4c-0.5,0-1,0.4-1,0.9l-0.2,2.1H6.5
        c-0.6,0-1.1,0.5-1,1.1l2,7.9h16l1-10.9C24.5,10,24.1,9.5,23.5,9.5z M22.8,18.4l-1.2-5c-0.2-0.6-0.5-0.9-1-0.9H9.3l0.2-2h8.1V10
        c0-0.3,0.2-0.5,0.5-0.5h3c0.3,0,0.5,0.2,0.5,0.5v0.5h2L22.8,18.4z"></path>
      </g>

      <g id="ico-fox">
        <path d="M17,14c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1C18,14.4,17.6,14,17,14z"></path>
        <path d="M13,14c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1C14,14.4,13.6,14,13,14z"></path>
        <path d="M20,13.4l1-5.8c0-0.2-0.1-0.4-0.3-0.5C20.6,7,20.3,7,20.2,7.1L15.8,11h-1.6L9.8,7.1C9.7,7,9.4,7,9.3,7.1
          C9.1,7.2,9,7.4,9,7.6l1,5.8c-0.8,0.9-1.3,2.5-0.8,3.8c0.3,0.8,1.2,1.8,3.5,1.9l1.9,3.7c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0
          c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0l0,0l0,0l0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,0l0,0l0,0
          c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0,0,0.1,0,0.1-0.1l1.9-3.7
          c2.2-0.1,3.1-1.1,3.5-1.9C21.3,15.9,20.8,14.3,20,13.4z M20,16C20,16,20,16,20,16L20,16c0,0.1,0,0.1,0,0.1
          c-0.1,0.3-0.5,0.8-2.5,0.8l0,0c-0.2,0-0.4,0.1-0.4,0.3L17,17.4c-0.7,1.3-1,2.6-2,2.6c-1,0-1.3-1.3-2-2.6l-0.1-0.2
          c-0.1-0.2-0.3-0.3-0.4-0.3l0,0c-2,0-2.4-0.5-2.5-0.8c0,0,0-0.1,0-0.1V16c0,0,0,0,0,0c0-0.8,0.4-1.7,0.9-2.2c0,0,0,0,0,0
          c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1l0,0c0-2.8,0.8-3.1,2.7-1.6l0,0c0,0,0.1,0.1,0.2,0.1
          c0,0,0,0,0,0c0,0,0.1,0,0.1,0h2c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1l0,0c2-1.5,2.7-1.2,2.7,1.6l0,0c0,0,0,0,0,0.1
          c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0C19.6,14.3,20,15.2,20,16z"></path>
      </g>

      <g id="ico-github">
        <path d="M15.1,5.2c-5.5,0-10,4.5-10,10c0,4.4,2.9,8.2,6.8,9.5c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7
          c-2.8,0.6-3.4-1.3-3.4-1.3c-0.4-1.1-1.1-1.5-1.1-1.5c-0.9-0.6,0.1-0.6,0.1-0.6c1,0.1,1.5,1,1.5,1c0.9,1.5,2.3,1.1,2.9,0.8
          c0.1-0.6,0.3-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-4.9c0-1.1,0.4-2,1-2.7c-0.1-0.3-0.4-1.3,0.1-2.6c0,0,0.8-0.3,2.7,1
          c0.8-0.2,1.7-0.3,2.5-0.3s1.7,0.1,2.5,0.3c1.9-1.3,2.7-1,2.7-1c0.5,1.4,0.2,2.4,0.1,2.6c0.6,0.7,1,1.6,1,2.7c0,3.8-2.3,4.7-4.6,4.9
          c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.7c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.8-5.1,6.8-9.5C25.1,9.7,20.6,5.2,15.1,5.2z"></path>
      </g>

      <g id="ico-grid">
        <rect x="13" y="13" width="4" height="4"></rect>
        <rect x="13" y="19" width="4" height="4"></rect>
        <rect x="7" y="13" width="4" height="4"></rect>
        <rect x="19" y="7" width="4" height="4"></rect>
        <rect x="19" y="19" width="4" height="4"></rect>
        <rect x="13" y="7" width="4" height="4"></rect>
        <rect x="7" y="7" width="4" height="4"></rect>
        <rect x="7" y="19" width="4" height="4"></rect>
        <rect x="19" y="13" width="4" height="4"></rect>
      </g>

      <g id="ico-gripper-1">
        <rect x="16" y="9" width="1" height="12"></rect>
        <rect x="13" y="9" width="1" height="12"></rect>
      </g>

      <g id="ico-gripper-2">
        <rect x="9" y="13" width="12" height="1"></rect>
        <rect x="9" y="16" width="12" height="1"></rect>
      </g>

      <g id="ico-gripper-3">
        <circle cx="15" cy="15" r="1.5"></circle>
        <circle cx="15" cy="10" r="1.5"></circle>
        <circle cx="15" cy="20" r="1.5"></circle>
      </g>

      <g id="ico-gripper-4">
        <circle cx="15" cy="15" r="1.5"></circle>
        <circle cx="20" cy="15" r="1.5"></circle>
        <circle cx="10" cy="15" r="1.5"></circle>
      </g>

      <g id="ico-group">
        <path d="M11.6,18.5l0.1-0.5c-0.7-0.6-1.1-1.4-1.2-2.4c-0.6-0.4-0.8-1.3-0.8-1.9l0-0.2c-0.1-0.8,0.1-1.7,0.5-2.2
          c0-0.1,0.1-0.1,0.1-0.1c0.1-2.3,1.3-3.9,3.2-4.4C12.9,6.2,12.2,6,11.3,6c-1.6,0-3,0.8-3,3.3l0,0.2c0,0-0.1,0-0.1,0
          c-0.2,0-0.5,0.6-0.4,1.2c0.1,0.7,0.2,1.2,0.5,1.2c0.1,0,0.1,0,0.2,0l0,0.5c0,0.8,0.4,1.4,1,1.8l-0.3,1.4C6.1,16,4,16.6,4,19.3h4.2
          C9.3,18.9,10.5,18.7,11.6,18.5z"></path>
        <path d="M19.7,11.2c0,0,0.1,0.1,0.1,0.1c0.4,0.5,0.6,1.4,0.5,2.2l0,0.2c-0.1,0.6-0.2,1.5-0.8,1.9
          c-0.1,0.9-0.5,1.7-1.2,2.4l0.1,0.5c1.1,0.2,2.3,0.4,3.4,0.8H26c0-2.7-2.1-3.3-5.2-3.8l-0.3-1.4c0.6-0.4,1-1,1-1.8l0-0.5
          c0,0,0.1,0,0.2,0c0.4,0,0.4-0.6,0.5-1.2c0.1-0.7-0.2-1.2-0.4-1.2c0,0-0.1,0-0.1,0l0-0.2c0-2.5-1.5-3.3-3-3.3
          c-0.8,0-1.6,0.2-2.2,0.8C18.4,7.3,19.6,8.9,19.7,11.2z"></path>
        <path d="M17.6,19.4l-0.4-1.7c0.8-0.5,1.3-1.2,1.3-2.2l0-0.6c0.1,0,0.1,0.1,0.2,0.1c0.5,0,0.5-0.7,0.6-1.5
          c0.1-0.8-0.2-1.5-0.5-1.5c0,0-0.1,0-0.2,0.1l0-0.3c0-3.1-1.8-4.1-3.7-4.1s-3.7,0.9-3.7,4.1l0,0.3c-0.1,0-0.1-0.1-0.2-0.1
          c-0.3,0-0.6,0.7-0.5,1.5c0.1,0.8,0.2,1.5,0.6,1.5c0.1,0,0.1,0,0.2-0.1l0,0.6c0,1,0.5,1.7,1.3,2.2l-0.4,1.7C8.6,19.9,6,20.7,6,24h9
          h9C24,20.7,21.4,19.9,17.6,19.4z"></path>
      </g>

      <g id="ico-hamburger">
        <rect x="7" y="19" width="16" height="2"></rect>
        <rect x="7" y="14" width="16" height="2"></rect>
        <rect x="7" y="9" width="16" height="2"></rect>
      </g>

      <g id="ico-headphones">
        <path d="M15,9c-3.3,0-6,2.7-6,6v4.5c0,0.8,0.7,1.5,1.5,1.5h0c0.8,0,1.5-0.7,1.5-1.5v-2c0-0.8-0.7-1.5-1.5-1.5h0
        c-0.2,0-0.3,0-0.5,0.1V15c0-2.8,2.2-5,5-5s5,2.2,5,5v1.1C19.8,16,19.7,16,19.5,16h0c-0.8,0-1.5,0.7-1.5,1.5v2c0,0.8,0.7,1.5,1.5,1.5
        h0c0.8,0,1.5-0.7,1.5-1.5V15C21,11.7,18.3,9,15,9z"></path>
      </g>

      <g id="ico-heart">
        <path d="M21.4,9.5C19,7.7,15.4,9.1,15,12.1c-0.4-3-4-4.5-6.4-2.7c-1.9,1.4-2.4,4.4,0,6.7c2.3,2.1,4.6,2.7,6.3,5.2
        c1.7-2.5,4.1-3.1,6.3-5.2C23.8,13.9,23.3,10.9,21.4,9.5z"></path>
      </g>

      <g id="ico-help">
        <path d="M15,7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C23,10.6,19.4,7,15,7z M15,22c-3.9,0-7-3.1-7-7c0-3.9,3.1-7,7-7
          c3.9,0,7,3.1,7,7C22,18.9,18.9,22,15,22z"></path>
        <path d="M15,18L15,18c-0.6,0-1,0.4-1,1v0c0,0.5,0.4,1,1,1h0c0.5,0,1-0.4,1-1v0C16,18.4,15.6,18,15,18z"></path>
        <path d="M14.8,10c-1.3,0.1-2.4,0.9-2.9,2l1.4,0.6c0.3-0.6,0.9-1,1.6-1.1c1.1-0.1,2,0.4,2.1,1.1c0.1,0.6-0.1,0.7-0.8,1.1
          c-0.8,0.5-1.9,1.1-1.9,3.1h1.5c0-1.1,0.5-1.3,1.2-1.8c0.7-0.4,1.7-1,1.6-2.6C18.3,10.9,16.7,9.8,14.8,10z"></path>
      </g>

      <g id="ico-help-filled">
        <path d="M15,8c-3.9,0-7,3.1-7,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C22,11.1,18.9,8,15,8z M16,19c0,0.5-0.4,1-1,1h0c-0.5,0-1-0.4-1-1v0
        c0-0.5,0.4-1,1-1h0C15.6,18,16,18.4,16,19L16,19z M16.9,15c-0.7,0.4-1.2,0.7-1.2,1.8h-1.5c0-1.9,1.2-2.6,1.9-3.1
        c0.7-0.4,0.9-0.6,0.8-1.1c-0.1-0.7-1-1.2-2.1-1.1c-0.7,0.1-1.4,0.5-1.6,1.1L11.9,12c0.5-1.1,1.6-1.9,2.9-2c2-0.2,3.6,0.9,3.7,2.4
        C18.6,14,17.7,14.6,16.9,15z"></path>
      </g>

      <g id="ico-home">
        <polygon points="15,9.5 8,15.5 10,15.5 10,20.5 14,20.5 14,16.5 16,16.5 16,20.5 20,20.5 20,15.5 22,15.5 "></polygon>
      </g>

      <g id="ico-hospital">
        <path d="M15,9.5l-7,3v8h14v-8L15,9.5z M18,16.2h-2.2v2.2h-1.5v-2.2H12v-1.5h2.2v-2.2h1.5v2.2H18V16.2z"></path>
      </g>

      <g id="ico-human">
        <path d="M17.6,18.6l-0.4-1.7c0.8-0.5,1.3-1.2,1.3-2.2l0-0.6c0.1,0,0.1,0.1,0.2,0.1c0.5,0,0.5-0.7,0.6-1.5
        c0.1-0.8-0.2-1.5-0.5-1.5c0,0-0.1,0-0.2,0.1l0-0.3c0-3.1-1.8-4.1-3.7-4.1s-3.7,0.9-3.7,4.1l0,0.3c-0.1,0-0.1-0.1-0.2-0.1
        c-0.3,0-0.6,0.7-0.5,1.5c0.1,0.8,0.2,1.5,0.6,1.5c0.1,0,0.1,0,0.2-0.1l0,0.6c0,1,0.5,1.7,1.3,2.2l-0.4,1.7C8.6,19.1,6,19.9,6,23.2
        h9h9C24,19.9,21.4,19.1,17.6,18.6z"></path>
      </g>

      <g id="ico-inbox">
        <path d="M22,17l-1-9H9l-1,9h0v5h14L22,17L22,17z M18,19h-6v-2H9.3l0.6-6h10.2l0.6,6H18V19z"></path>
      </g>

      <g id="ico-infinity">
        <path d="M18.9,11.4c-2.8,0-4.7,3-4.8,3.1l0,0c-0.4,0.6-1.7,2.2-3.1,2.2C9.8,16.6,9,16,9,15s0.8-1.6,2.1-1.6
        c0.7,0,1.4,0.4,2,0.9c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.4-0.6,1-1.2c-0.8-0.7-1.9-1.3-3.2-1.3C8.7,11.4,7,12.9,7,15
        c0,2.1,1.7,3.6,4.1,3.6c2.8,0,4.7-3,4.8-3.1l0,0c0.4-0.6,1.7-2.2,3.1-2.2c1.3,0,2.1,0.6,2.1,1.6s-0.8,1.6-2.1,1.6
        c-0.7,0-1.4-0.4-2-0.9c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0.1-0.4,0.6-1,1.2c0.8,0.7,1.9,1.3,3.2,1.3c2.4,0,4.1-1.5,4.1-3.6
        C23,12.9,21.3,11.4,18.9,11.4z"></path>
      </g>

      <g id="ico-info">
        <path d="M15,23c4.4,0,8-3.6,8-8c0-4.4-3.6-8-8-8c-4.4,0-8,3.6-8,8C7,19.4,10.6,23,15,23z M15,8c3.9,0,7,3.1,7,7c0,3.9-3.1,7-7,7
          c-3.9,0-7-3.1-7-7C8,11.1,11.1,8,15,8z"></path>
        <path d="M15,12L15,12c0.6,0,1-0.4,1-1v0c0-0.5-0.4-1-1-1h0c-0.5,0-1,0.4-1,1v0C14,11.6,14.4,12,15,12z"></path>
        <rect x="14.2" y="13.2" width="1.5" height="6.8"></rect>
      </g>

      <g id="ico-info-filled">
        <path d="M15,8c-3.9,0-7,3.1-7,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C22,11.1,18.9,8,15,8z M15.8,20h-1.5v-6.8h1.5V20z M16,11
        c0,0.5-0.4,1-1,1h0c-0.5,0-1-0.4-1-1v0c0-0.5,0.4-1,1-1h0C15.6,10,16,10.4,16,11L16,11z"></path>
      </g>

      <g id="ico-lightning">
        <path d="M13,23l2-7l-4,1l6-10l-2,7l4-1L13,23z"></path>
      </g>

      <g id="ico-linkedin">
        <circle cx="9.6" cy="9.6" r="1.7"></circle>
        <rect x="8.1" y="12.6" width="3" height="9.5"></rect>
        <path d="M18.6,12.4c-1.4,0-2.4,0.8-2.8,1.5h0v-1.3h-2.8v9.5h3v-4.7c0-1.2,0.2-2.5,1.8-2.5c1.5,0,1.5,1.4,1.5,2.5v4.6h3v-5.2
          C22.2,14.3,21.6,12.4,18.6,12.4z"></path>
      </g>

      <g id="ico-list">
        <rect x="11" y="18" width="10" height="2"></rect>
        <circle cx="8" cy="11" r="1"></circle>
        <circle cx="8" cy="15" r="1"></circle>
        <circle cx="8" cy="19" r="1"></circle>
        <rect x="11" y="14" width="8" height="2"></rect>
        <rect x="11" y="10" width="12" height="2"></rect>
      </g>

      <g id="ico-location">
        <path d="M15,6c-3.3,0-6,2.7-6,6c0,0.2,0,0.4,0,0.7c0.4,4.2,4.5,4.7,6,11.3c1.4-6.7,5.6-7.1,6-11.3c0-0.2,0-0.4,0-0.7
        C21,8.7,18.3,6,15,6z M15,14.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5C17.5,13.4,16.4,14.5,15,14.5z"></path>
      </g>

      <g id="ico-lock">
        <path d="M20,15v-3c0-2.8-2.2-5-5-5s-5,2.2-5,5v3H8v8h14v-8H20z M12,12c0-1.7,1.3-3,3-3s3,1.3,3,3v3h-6V12z"></path>
      </g>

      <g id="ico-lock-open">
        <path d="M20,15v-3c0-2.8-2.2-5-5-5s-5,2.2-5,5h2c0-1.7,1.3-3,3-3s3,1.3,3,3v3H8v8h14v-8H20z"></path>
      </g>

      <g id="ico-mail">
        <path d="M8,10.5v9h14v-9H8z M20.1,11.5l-2.7,4h-4.9l-2.7-4H20.1z M9,18.5V12l3,4.5h6l3-4.5v6.5H9z"></path>
      </g>

      <g id="ico-map">
        <path d="M23.2,9l-6-2c0,0,0,0,0,0c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0L13,9L7.2,7C7,7,6.8,7,6.7,7.1
        C6.6,7.2,6.5,7.3,6.5,7.5v13c0,0.2,0.1,0.4,0.3,0.5l6,2c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0,0L17,21l5.8,1.9
        c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.2,0.2-0.4v-13C23.5,9.3,23.4,9.1,23.2,9z M7.5,8.2l5,1.7v11.9l-5-1.7V8.2z
         M22.5,21.8l-5-1.7V8.2l5,1.7V21.8z"></path>
      </g>

      <g id="ico-message">
        <path d="M22,7.5H8c-0.6,0-1,0.4-1,1v9c0,0.6,0.4,1,1,1h8l-2,4l6-4h2c0.6,0,1-0.4,1-1v-9C23,7.9,22.6,7.5,22,7.5z M9,12.5h8v1H9V12.5
        z M19,16.5H9v-1h10V16.5z M21,10.5H9v-1h12V10.5z"></path>
      </g>

      <g id="ico-mic">
        <path d="M19,15.5V13c0-0.3-0.2-0.5-0.5-0.5S18,12.7,18,13v2.5c0,1.7-1.3,3-3,3s-3-1.3-3-3V13c0-0.3-0.2-0.5-0.5-0.5S11,12.7,11,13
          v2.5c0,2,1.5,3.7,3.5,3.9v2.1h-2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2v-2.1
          C17.5,19.2,19,17.5,19,15.5z"></path>
        <path d="M15,17.5c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2s-2,0.9-2,2v6C13,16.6,13.9,17.5,15,17.5z"></path>
      </g>

      <g id="ico-minus">
        <rect x="10" y="14" width="10" height="2"></rect>
      </g>

      <g id="ico-mirth">
        <path d="M23,14.9c0-0.4-0.3-0.9-0.9-1.3l0.6-1.9h-2.1l-0.6,0.8c-0.5-0.2-1.4-0.5-2.3-0.7c-1.5-0.3-3.1-0.6-4.5-0.6
          c-3.9,0-5.8,1.4-6.2,2.9C7,14.4,7,14.5,7,14.7c0,0.1,0,0.2,0,0.2c0.1,0.8,0.6,1.6,1.6,2.1c0.5,0.3,1.1,0.5,1.8,0.6
          c0.7,0.2,1.5,0.2,2.4,0.3l0.3,0.7l2.8,0l0.5-1c0.6-0.1,1.1-0.2,1.6-0.3c0.5-0.1,1-0.2,1.5-0.3c0,0,0,0,0,0c0.1,0,0.3-0.1,0.3-0.1
          l0.7,0.9h2.1l-0.6-1.8C22.6,15.8,23,15.4,23,14.9z M19.7,16.1C19.7,16.1,19.7,16.1,19.7,16.1c-0.1,0-0.2,0.1-0.3,0.1
          c-0.9,0.2-1.9,0.4-3,0.6c0,0-1.8,0.2-3.3,0.2l-0.2,0c-0.8,0-1.5-0.1-2.1-0.2c-0.6-0.1-1.2-0.3-1.6-0.6c-0.2-0.1-0.3-0.2-0.4-0.3
          c0,0,0,0,0-0.1c0.2,0,0.3,0.1,0.5,0.1c0.9,0.2,2.4,0.3,3.9,0.3l0.2,0c0,0,0,0,0,0c1.4,0,3.1-0.1,3.1-0.1c1-0.1,2-0.1,2.8-0.2l0.3,0
          c0.3,0,0.6-0.1,0.8-0.1C20.1,15.9,19.9,16,19.7,16.1L19.7,16.1z M17.5,12.8c0.6,0.1,1.2,0.3,1.8,0.5c-1.3-0.2-3.9-0.4-5.9-0.4
          c-1.6,0-3.4,0.1-4.6,0.5c0.8-0.6,2.3-1.1,4.5-1.1C14.5,12.3,16.1,12.6,17.5,12.8z M9,14.4c0.7-0.2,2-0.5,4.4-0.5c2,0,4.8,0.2,6,0.4
          c0.8,0.1,1.3,0.3,1.6,0.3c-0.3,0.1-1,0.2-1.7,0.3L19,15c-0.8,0.1-1.8,0.2-2.8,0.2c0,0-1.6,0.1-3,0.1h0l-0.1,0
          c-1.5,0-2.8-0.1-3.7-0.3c-0.2,0-0.3-0.1-0.4-0.1c0-0.1,0-0.1,0-0.2C9,14.6,9,14.5,9,14.4z"></path>
      </g>

      <g id="ico-note">
        <path d="M17,7H9v16h12V11L17,7z M20,22H10V8h6v4h4V22z"></path>
        <rect x="11" y="11" width="4" height="1"></rect>
        <rect x="11" y="13" width="8" height="1"></rect>
        <rect x="11" y="15" width="5" height="1"></rect>
        <rect x="11" y="17" width="7" height="1"></rect>
        <rect x="11" y="19" width="3.2" height="1"></rect>
      </g>

      <g id="ico-note-filled">
        <path d="M17.1,7H9v16h12V10.9L17.1,7z M11,9.5h4v1h-4V9.5z M11,14.5h5v1h-5V14.5z M14.2,20.5H11v-1h3.2V20.5z M18,18h-7v-1h7V18z
         M19,13h-8v-1h8V13z"></path>
      </g>

      <g id="ico-pause">
        <rect x="12" y="10" width="2" height="10"></rect>
        <rect x="16" y="10" width="2" height="10"></rect>
      </g>

      <g id="ico-pencil">
        <rect x="13.1" y="8.4" transform="matrix(0.7071 0.7071 -0.7071 0.7071 14.6247 -7.1192)" width="5.7" height="11.4"></rect>
        <path d="M22.9,11.1l-4-4l0.6-0.6c0.8-0.8,2-0.8,2.8,0l1.2,1.2c0.8,0.8,0.8,2,0,2.8L22.9,11.1z"></path>
        <polygon points="12.9,21.1 8.9,17.1 5.9,24.1  "></polygon>
      </g>

      <g id="ico-phone">
        <path d="M18,8h-6c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V9C19,8.4,18.6,8,18,8z M15,21.2
        c-0.4,0-0.8-0.3-0.8-0.8c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8C15.7,20.9,15.4,21.2,15,21.2z M18,19h-6v-9h6V19z"></path>
      </g>

      <g id="ico-phone-connected">
        <path d="M20,6H10C9.4,6,9,6.4,9,7l0,16c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1l0-16C21,6.4,20.6,6,20,6z M15,23.2
          c-0.4,0-0.8-0.3-0.8-0.8c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8C15.7,22.9,15.4,23.2,15,23.2z M20,21H10l0-13h10L20,21z"></path>
        <polygon points="19.2,12.9 17.8,11.4 14,15.2 12.2,13.4 10.8,14.9 14,18.1  "></polygon>
      </g>

      <g id="ico-phone-disconnected">
        <polygon points="12.7,18.2 15,15.9 17.3,18.2 18.7,16.8 16.4,14.5 18.7,12.2 17.3,10.8 15,13.1 12.7,10.8
          11.3,12.2 13.6,14.5 11.3,16.8   "></polygon>
        <path d="M21,23V7c0-0.6-0.4-1-1-1H10C9.4,6,9,6.4,9,7v16c0,0.6,0.4,1,1,1h10C20.6,24,21,23.6,21,23z M10,21V8h10v13
          H10z M14.2,22.5c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8c0,0.4-0.3,0.8-0.8,0.8C14.6,23.2,14.2,22.9,14.2,22.5z"></path>
      </g>

      <g id="ico-ping-pong">
        <path d="M20.8,19.5c-1.2-0.9-2.4-1.8-3.4-2.8c-0.2-0.2-0.2-0.4,0-0.6l1.2-1.2c0.2-1.5-0.3-3.1-1.5-4.3c-2-2-5-2.1-6.8-0.2
        s-1.7,4.9,0.2,6.8c1.2,1.2,2.8,1.7,4.3,1.5l1.2-1.2c0.2-0.2,0.4-0.2,0.6,0c1,1,1.9,2.1,2.8,3.4c0.1,0.1,0.3,0.2,0.5,0l0.9-0.9
        C21,19.8,21,19.6,20.8,19.5z"></path>
      </g>

      <g id="ico-play">
        <polygon points="11,20 19,15 11,10 "></polygon>
      </g>

      <g id="ico-plus">
        <polygon points="20,14 16,14 16,10 14,10 14,14 10,14 10,16 14,16 14,20 16,20 16,16 20,16 "></polygon>
      </g>

      <g id="ico-pointer-up">
        <polygon points="20.7,12.5 15,6.8 9.3,12.5 10.7,13.9 14,10.6 14,23.2 16,23.2 16,10.6 19.3,13.9 "></polygon>
      </g>

      <g id="ico-pointer-down">
        <polygon points="19.3,16.1 16,19.4 16,6.8 14,6.8 14,19.4 10.7,16.1 9.3,17.5 15,23.2 20.7,17.5 "></polygon>
      </g>

      <g id="ico-pointer-right">
        <polygon points="17.5,9.3 16.1,10.7 19.4,14 6.8,14 6.8,16 19.4,16 16.1,19.3 17.5,20.7 23.2,15 "></polygon>
      </g>

      <g id="ico-pointer-left">
        <polygon points="23.2,14 10.6,14 13.9,10.7 12.5,9.3 6.8,15 12.5,20.7 13.9,19.3 10.6,16 23.2,16 "></polygon>
      </g>

      <g id="ico-popup">
        <polygon points="8.5,7 8.5,11 9.5,11 9.5,10 23.5,10 23.5,17 22.5,17 22.5,18 24.5,18 24.5,7  "></polygon>
        <path d="M5.5,23h16V12h-16V23z M6.5,15h14v7h-14V15z"></path>
      </g>

      <g id="ico-print">
        <path d="M22.5,17H22v-3.5c0-0.3-0.2-0.5-0.5-0.5H20v4H10v-4H8.5C8.2,13,8,13.2,8,13.5V17H7.5C7.2,17,7,17.2,7,17.5V21h3v-2h10v2h3
          v-3.5C23,17.2,22.8,17,22.5,17z"></path>
        <rect x="11" y="7" width="8" height="9"></rect>
        <rect x="11" y="20" width="8" height="3"></rect>
      </g>

      <g id="ico-radio-off">
        <path d="M15,7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C23,10.6,19.4,7,15,7z M15,21.7c-3.7,0-6.7-3-6.7-6.7
        c0-3.7,3-6.7,6.7-6.7c3.7,0,6.7,3,6.7,6.7C21.7,18.7,18.7,21.7,15,21.7z"></path>
      </g>

      <g id="ico-radio-on">
        <path d="M15,7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C23,10.6,19.4,7,15,7z M15,21.7c-3.7,0-6.7-3-6.7-6.7
          c0-3.7,3-6.7,6.7-6.7c3.7,0,6.7,3,6.7,6.7C21.7,18.7,18.7,21.7,15,21.7z"></path>
        <path d="M15,10.3c-2.6,0-4.7,2.1-4.7,4.7c0,2.6,2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7C19.7,12.4,17.6,10.3,15,10.3z"></path>
      </g>

      <g id="ico-redo">
        <path d="M17.3,6.6l-1.4,1.4l3.3,3.3H17c-6.6,0-10,4-10,12h2c0-6.8,2.5-10,8-10h2.2l-3.3,3.3l1.4,1.4l5.7-5.7L17.3,6.6z"></path>
      </g>

      <g id="ico-refresh">
        <path d="M14.8,13.6l6.8,1.8l1.8-6.8l-1.9-0.5l-0.8,3.2c-1.3-2.3-3.7-3.8-6.5-3.8c-4.1,0-7.5,3.4-7.5,7.5s3.4,7.5,7.5,7.5
        c2.1,0,3.9-0.8,5.3-2.2L18,18.9c-1,1-2.4,1.6-3.9,1.6c-3,0-5.5-2.5-5.5-5.5c0-3,2.5-5.5,5.5-5.5c2.2,0,4.1,1.3,5,3.2l-3.8-1
        L14.8,13.6z"></path>
      </g>

      <g id="ico-refresh-2">
        <path d="M21.3,11l-1.5,1.4c0.9,1.6,0.9,3.7-0.1,5.4c-1.1,1.9-3.2,2.8-5.3,2.6l1.8-1.8l-1.4-1.4l-4,4l4,4l1.4-1.4l-1.3-1.4
        c2.6,0,5.2-1.3,6.6-3.7C22.9,16.3,22.8,13.3,21.3,11z"></path>
        <path d="M15.5,9.5l-1.8,1.8l1.4,1.4l4-4l-4-4l-1.4,1.4l1.3,1.4c-2.6,0-5.2,1.3-6.6,3.7c-1.5,2.5-1.3,5.5,0.2,7.9l1.5-1.4
        c-0.9-1.6-0.9-3.7,0.1-5.4C11.4,10.3,13.5,9.3,15.5,9.5z"></path>
      </g>

      <g id="ico-register">
        <path d="M22,17v-4h-4v4h-4v-1h2c0.6,0,1-0.4,1-1v-5c0-0.6-0.4-1-1-1H8c-0.6,0-1,0.4-1,1v5c0,0.6,0.4,1,1,1h2v1H7v4h16v-4H22z M8,10
        h8v5H8V10z"></path>
      </g>

      <g id="ico-repeat">
        <path d="M9,15.1C9,15.1,9,15,9,15.1c0-1.5,1.1-2.6,2.5-2.6h7c0,0,0,0,0,0v1.8l4.6-2.8l-4.6-2.8v1.8h-7v0C9,10.5,7,12.5,7,15
          c0,0.4,0.1,0.8,0.2,1.2L9,15.1z"></path>
        <path d="M21,14.9c0,0,0,0.1,0,0.1c0,1.4-1.1,2.5-2.5,2.5h-7v-1.8l-4.6,2.8l4.6,2.8v-1.8h7v0c2.5,0,4.5-2,4.5-4.5
          c0-0.4-0.1-0.8-0.2-1.2L21,14.9z"></path>
      </g>

      <g id="ico-rewind">
        <polygon points="21,19 15,15 21,11  "></polygon>
        <polygon points="9,15 15,11 15,15 15,19   "></polygon>
      </g>

      <g id="ico-rdio">
        <path d="M24.5,10.5c-2.3,0.1-5.1-1.7-6.2-2.4
          c-0.1-0.1-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.2v6.7h0c0,0.6-0.3,1.2-0.6,1.8l0,0.1c-1.1,1.7-3.4,2.8-5.5,2
          c-2.1-0.7-2.6-2.7-1.5-4.5l0-0.1c1.1-1.7,3.4-2.8,5.5-2c0.2,0.1,0.3,0.1,0.5,0.2V7.1c-0.8-0.2-1.6-0.3-2.4-0.3C8.7,6.7,5,10.4,5,15
          v0.1c0,4.6,3.6,8.2,8.5,8.2c4.9,0,8.6-3.7,8.6-8.3v-0.1c0-0.4,0-0.7-0.1-1C24.7,13.2,25.7,10.6,24.5,10.5"></path>
      </g>

      <g id="ico-rss">
        <path d="M7.8,12.7C7.8,12.7,7.8,12.7,7.8,12.7l0,3c0,0,0,0,0,0c3.6,0,6.5,2.9,6.5,6.5h3C17.3,17,13,12.7,7.8,12.7z"></path>
        <path d="M7.8,7.8C7.8,7.8,7.8,7.8,7.8,7.8l0,3c0,0,0,0,0,0c6.3,0,11.5,5.1,11.5,11.5h3C22.2,14.3,15.7,7.8,7.8,7.8z"></path>
        <circle cx="9.8" cy="20.2" r="2"></circle>
      </g>

      <g id="ico-save">
        <path d="M18,8H8v14h14V12C20.4,10.4,19.6,9.6,18,8z M21,21H9V9h8.6l3.4,3.4V21z"></path>
        <polygon points="10,14 15,14 15,12.4 16,12.4 16,14 17,14 17,11 10,11  "></polygon>
      </g>

      <g id="ico-search">
        <path d="M22.4,20.9l-4.1-4.1c-0.4,0.5-0.9,1-1.4,1.4l4.1,4.1c0.2,0.2,0.5,0.2,0.7,0l0.7-0.7C22.5,21.5,22.5,21.1,22.4,20.9z"></path>
        <path d="M18.5,13c0-3-2.5-5.5-5.5-5.5S7.5,10,7.5,13c0,3,2.5,5.5,5.5,5.5S18.5,16,18.5,13z M13,17.5c-2.5,0-4.5-2-4.5-4.5
          s2-4.5,4.5-4.5s4.5,2,4.5,4.5S15.5,17.5,13,17.5z"></path>
      </g>

      <g id="ico-settings">
        <path d="M22,16v-2l-1.7-0.6c-0.1-0.4-0.3-0.7-0.4-1l0.8-1.6l-1.4-1.4l-1.6,0.8c-0.3-0.2-0.7-0.3-1-0.4L16,8h-2l-0.6,1.7
        c-0.4,0.1-0.7,0.3-1,0.4l-1.6-0.8l-1.4,1.4l0.8,1.6c-0.2,0.3-0.3,0.7-0.4,1L8,14v2l1.7,0.6c0.1,0.4,0.3,0.7,0.4,1l-0.8,1.6l1.4,1.4
        l1.6-0.8c0.3,0.2,0.7,0.3,1,0.4L14,22h2l0.6-1.7c0.4-0.1,0.7-0.3,1-0.4l1.6,0.8l1.4-1.4l-0.8-1.6c0.2-0.3,0.3-0.7,0.4-1L22,16z
         M15,17c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C17,16.1,16.1,17,15,17z"></path>
      </g>

      <g id="ico-shuffle">
        <path d="M19.4,17.4c-2.2-0.2-3.4-0.7-4.3-1.4c-0.2,0.2-0.3,0.4-0.5,0.6c-0.3,0.3-0.5,0.6-0.8,0.9c1.2,0.9,2.8,1.7,5.7,1.9v1.9
          l4.6-2.8l-4.6-2.8V17.4z"></path>
        <path d="M11.1,14.4c0.1-0.1,0.3-0.3,0.4-0.5c0.3-0.3,0.6-0.7,0.9-1c-1.1-1.3-2.8-2.4-6.5-2.4v2C9,12.5,10.2,13.3,11.1,14.4z"></path>
        <path d="M19.4,12.7v1.6l4.6-2.8l-4.6-2.8v2c-4.2,0.5-5.7,2.3-7.1,4c-1.4,1.6-2.5,2.9-6.3,2.9v2c4.7,0,6.3-1.9,7.8-3.6
          C15,14.5,16.2,13.2,19.4,12.7z"></path>
      </g>

      <g id="ico-sort">
        <polygon points="12,20.2 12,9 10,9 10,20.2 7.7,17.9 6.3,19.3 11,24 15.7,19.3 14.3,17.9  "></polygon>
        <polygon points="19,6 14.3,10.7 15.7,12.1 18,9.8 18,21 20,21 20,9.8 22.3,12.1 23.7,10.7   "></polygon>
      </g>

      <g id="ico-spinner-1">
        <path d="M15.5,6C21,6,25,10,25,15c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-3.3-2.7-6-6-6s-6,2.7-6,6s2.7,6,6,6c1.7,0,3.2-0.7,4.2-1.8
        c-1.1,1.7-3.1,2.8-4.7,2.8C10.1,22,7,18.4,7,14.5C7,9.5,11.1,6,15.5,6z"></path>
      </g>

      <g id="ico-spinner-2">
        <path d="M15,11c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1s1,0.4,1,1v2C16,10.6,15.6,11,15,11z"></path>
        <path d="M11.5,12.5c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4
          C12,12.4,11.7,12.5,11.5,12.5z"></path>
        <path d="M10,16H8c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S10.6,16,10,16z"></path>
        <path d="M10.1,20.9c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4
          C10.6,20.9,10.3,20.9,10.1,20.9z"></path>
        <path d="M15,23c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C16,22.6,15.6,23,15,23z"></path>
        <path d="M19.9,20.9c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4
          C20.5,20.9,20.2,20.9,19.9,20.9z"></path>
        <path d="M22,16h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S22.6,16,22,16z"></path>
        <path d="M18.5,12.5c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4
          C19,12.4,18.8,12.5,18.5,12.5z"></path>
      </g>

      <g id="ico-spinner-3">
        <path d="M15,11.5c-0.3,0-0.5-0.2-0.5-0.4c0-0.2-0.3-1.9-2.5-1.9c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5c2.5,0,3.4,1.8,3.5,2.8
          C15.5,11.2,15.3,11.4,15,11.5C15,11.5,15,11.5,15,11.5z"></path>
        <path d="M8.4,13.1c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7c1.8-1.8,3.7-1.1,4.4-0.5c0.2,0.2,0.2,0.5,0.1,0.7
          c-0.2,0.2-0.5,0.2-0.7,0.1c-0.2-0.1-1.5-1.1-3.1,0.5C8.7,13.1,8.5,13.1,8.4,13.1z"></path>
        <path d="M8.7,18.5c-0.3,0-0.5-0.2-0.5-0.5c0-2.5,1.8-3.4,2.8-3.5c0.3,0,0.5,0.2,0.6,0.4c0,0.3-0.2,0.5-0.4,0.6
          c-0.2,0-1.9,0.3-1.9,2.5C9.2,18.3,8.9,18.5,8.7,18.5z"></path>
        <path d="M12.6,22.1c-0.1,0-0.3,0-0.4-0.1c-1.8-1.8-1.1-3.7-0.5-4.4c0.2-0.2,0.5-0.2,0.7-0.1s0.2,0.5,0.1,0.7
          c-0.1,0.2-1.1,1.5,0.5,3.1c0.2,0.2,0.2,0.5,0,0.7C12.9,22,12.8,22.1,12.6,22.1z"></path>
        <path d="M18,21.8c-2.5,0-3.4-1.8-3.5-2.8c0-0.3,0.2-0.5,0.4-0.6c0.3,0,0.5,0.2,0.6,0.4c0,0.2,0.3,1.9,2.5,1.9
          c0.3,0,0.5,0.2,0.5,0.5S18.3,21.8,18,21.8z"></path>
        <path d="M19.4,18.9c-0.8,0-1.5-0.3-1.9-0.6c-0.2-0.2-0.2-0.5-0.1-0.7c0.2-0.2,0.5-0.2,0.7-0.1c0.2,0.1,1.5,1.1,3.1-0.5
          c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7C21.1,18.6,20.2,18.9,19.4,18.9z"></path>
        <path d="M19,15.5c-0.3,0-0.5-0.2-0.5-0.4c0-0.3,0.2-0.5,0.4-0.6c0.2,0,1.9-0.3,1.9-2.5c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5
          C21.8,14.5,20,15.4,19,15.5C19.1,15.5,19,15.5,19,15.5z"></path>
        <path d="M17.8,12.7c-0.1,0-0.2,0-0.3-0.1c-0.2-0.2-0.2-0.5-0.1-0.7c0.1-0.2,1.1-1.5-0.5-3.1c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0
          c1.8,1.8,1.1,3.7,0.5,4.4C18.1,12.6,18,12.7,17.8,12.7z"></path>
      </g>
      

      <g id="ico-spreadsheet">
        <path d="M8.5,7v16h13V7H8.5z M9.5,11h2v2h-2V11z M17.5,13h-2v-2h2V13z M14.5,17v2h-2v-2H14.5z M12.5,16v-2h2v2H12.5z
         M15.5,17h2v2h-2V17z M15.5,16v-2h2v2H15.5z M14.5,13h-2v-2h2V13z M9.5,14h2v2h-2V14z M9.5,17h2v2h-2V17z M9.5,22v-2h2v2H9.5z
         M12.5,22v-2h2v2H12.5z M15.5,22v-2h2v2H15.5z M20.5,22h-2v-2h2V22z M20.5,19h-2v-2h2V19z M20.5,16h-2v-2h2V16z M20.5,13h-2v-2h2V13
         z M20.5,10h-11V8h11V10z"></path>
      </g>

      <g id="ico-square">
        <path d="M21,9v12H9V9H21 M23,7H7v16h16V7L23,7z"></path>
      </g>

      <g id="ico-square-filled">
        <rect x="7" y="7" width="16" height="16"></rect>
      </g>

      <g id="ico-star">
        <polygon points="15,8 16.7,13.3 22.4,13.3 17.8,16.7 19.5,22 15,18.7 10.5,22 12.2,16.7 7.6,13.3 13.3,13.3 "></polygon>
      </g>

      <g id="ico-step-back">
        <polygon points="21,10 13,15 21,20  "></polygon>
        <rect x="9" y="10" width="2" height="10"></rect>
      </g>

      <g id="ico-step-forward">
        <polygon points="9,20 17,15 9,10  "></polygon>
        <rect x="19" y="10" width="2" height="10"></rect>
      </g>

      <g id="ico-stop">
        <rect x="10" y="10" width="10" height="10"></rect>
      </g>

      <g id="ico-stop-sign">
        <path d="M18.5,7h-7C9.7,8.8,8.8,9.7,7,11.5v7c1.8,1.8,2.7,2.7,4.5,4.5h7c1.8-1.8,2.7-2.7,4.5-4.5v-7C21.2,9.7,20.3,8.8,18.5,7z"></path>
      </g>

      <g id="ico-stopwatch">
        <path d="M20.6,11.8l0.4-0.4c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-0.4,0.4c-1-0.8-2.3-1.3-3.7-1.4V8h2C17.8,8,18,7.8,18,7.5
          S17.8,7,17.5,7h-5C12.2,7,12,7.2,12,7.5S12.2,8,12.5,8h2v1C10.9,9.3,8,12.3,8,16c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7
          C22,14.4,21.5,13,20.6,11.8z M15.5,22c0-0.6,0-1.3,0-1.3c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5v0c0,0,0,0,0,0
          c0,0,0,0.8,0,1.3c-2.9-0.2-5.2-2.6-5.5-5.5c0.6,0,1.3,0,1.3,0c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5h0c0,0,0,0,0,0
          c0,0-0.8,0-1.3,0c0.2-2.9,2.6-5.2,5.5-5.5c0,0.6,0,1.3,0,1.3c0,0.3,0.2,0.5,0.5,0.5c0.3,0,0.5-0.2,0.5-0.5v0c0,0,0,0,0,0
          c0,0,0-0.7,0-1.3c2.9,0.2,5.2,2.6,5.5,5.5c-0.6,0-1.3,0-1.3,0c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5h0c0,0,0,0,0,0
          c0,0,0.8,0,1.3,0C20.7,19.4,18.4,21.7,15.5,22z"></path>
        <path d="M15.4,15.1C15.3,15,15.1,15,15,15c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1c0-0.1,0-0.3-0.1-0.4l1.8-2.4L15.4,15.1z"></path>
      </g>

      <g id="ico-store-front">
        <polygon points="21,8.5 9,8.5 8,11.5 22,11.5  "></polygon>
        <polygon points="20,15.5 10,15.5 10,12.5 9,12.5 9,21.5 21,21.5 21,12.5 20,12.5  "></polygon>
      </g>

      <g id="ico-sun">
        <path d="M15,10c0.3,0,0.5-0.2,0.5-0.5v-2C15.5,7.2,15.3,7,15,7s-0.5,0.2-0.5,0.5v2C14.5,9.8,14.7,10,15,10z"></path>
        <path d="M10.8,11.5c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7L10,9.3c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7
          L10.8,11.5z"></path>
        <path d="M10,15c0-0.3-0.2-0.5-0.5-0.5h-2C7.2,14.5,7,14.7,7,15s0.2,0.5,0.5,0.5h2C9.8,15.5,10,15.3,10,15z"></path>
        <path d="M10.8,18.5L9.3,20c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l1.4-1.4c0.2-0.2,0.2-0.5,0-0.7
          S11,18.3,10.8,18.5z"></path>
        <path d="M15,20c-0.3,0-0.5,0.2-0.5,0.5v2c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-2C15.5,20.2,15.3,20,15,20z"></path>
        <path d="M19.2,18.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l1.4,1.4c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7
          L19.2,18.5z"></path>
        <path d="M22.5,14.5h-2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2c0.3,0,0.5-0.2,0.5-0.5S22.8,14.5,22.5,14.5z"></path>
        <path d="M18.9,11.6c0.1,0,0.3,0,0.4-0.1l1.4-1.4c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-1.4,1.4c-0.2,0.2-0.2,0.5,0,0.7
          C18.6,11.6,18.8,11.6,18.9,11.6z"></path>
        <circle cx="15" cy="15" r="4"></circle>
      </g>

      <g id="ico-tablet">
        <path d="M6,9v12c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1V9c0-0.6-0.4-1-1-1H7C6.4,8,6,8.4,6,9z M23.2,15
        c0,0.4-0.3,0.8-0.8,0.8c-0.4,0-0.8-0.3-0.8-0.8c0-0.4,0.3-0.8,0.8-0.8C22.9,14.3,23.2,14.6,23.2,15z M21,9v12H7V9H21z"></path>
      </g>

      <g id="ico-tablet-connected">
        <path d="M23,8L7,8C6.4,8,6,8.4,6,9v12c0,0.6,0.4,1,1,1l16,0c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z M21,21L7,21V9l14,0V21z
           M22.5,15.8c-0.4,0-0.8-0.3-0.8-0.8c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8C23.2,15.4,22.9,15.8,22.5,15.8z"></path>
        <polygon points="19.2,12.4 17.8,10.9 12.5,16.2 10.2,13.9 8.8,15.4 12.5,19.1   "></polygon>
      </g>

      <g id="ico-tablet-disconnected">
        <polygon points="11.7,18.7 14,16.4 16.3,18.7 17.7,17.3 15.4,15 17.7,12.7 16.3,11.3 14,13.6 11.7,11.3 10.3,12.7
          12.6,15 10.3,17.3   "></polygon>
        <path d="M23,8H7C6.4,8,6,8.4,6,9v12c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z M21,21H7V9h14V21z
           M22.5,15.8c-0.4,0-0.8-0.3-0.8-0.8c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8C23.2,15.4,22.9,15.8,22.5,15.8z"></path>
      </g>

      <g id="ico-texas">
        <path d="M11.7,6.8l3.8,0.3l-0.1,3.2c3,2.3,4.9,1.1,6,1.1c1.3-0.1,0.7,2.5,1.3,2.9c1.2,0.8,0.3,2.3,0.1,2.9
        c-1.8,2.3-5.3-0.1-4.7,5.9c0.1,0.5-2.8-0.4-2.9-0.9c-0.1-0.5-2.2-8.2-4.6-4.1c-1.5-0.3-1.4-2.2-1.9-2.5s-2.2-1-2.2-2.4l4.6,0.4
        L11.7,6.8z"></path>
      </g>

      <g id="ico-text-left">
        <path d="M21.5,8h-14C7.2,8,7,7.8,7,7.5v0C7,7.2,7.2,7,7.5,7h14C21.8,7,22,7.2,22,7.5v0C22,7.8,21.8,8,21.5,8z"></path>
        <path d="M22.5,11h-15C7.2,11,7,10.8,7,10.5v0C7,10.2,7.2,10,7.5,10h15c0.3,0,0.5,0.2,0.5,0.5v0C23,10.8,22.8,11,22.5,11z"></path>
        <path d="M18.5,14h-11C7.2,14,7,13.8,7,13.5v0C7,13.2,7.2,13,7.5,13h11c0.3,0,0.5,0.2,0.5,0.5v0C19,13.8,18.8,14,18.5,14z"></path>
        <path d="M21.5,17h-14C7.2,17,7,16.8,7,16.5v0C7,16.2,7.2,16,7.5,16h14c0.3,0,0.5,0.2,0.5,0.5v0C22,16.8,21.8,17,21.5,17z"></path>
        <path d="M20.5,20h-13C7.2,20,7,19.8,7,19.5v0C7,19.2,7.2,19,7.5,19h13c0.3,0,0.5,0.2,0.5,0.5v0C21,19.8,20.8,20,20.5,20z"></path>
        <path d="M16.5,23h-9C7.2,23,7,22.8,7,22.5v0C7,22.2,7.2,22,7.5,22h9c0.3,0,0.5,0.2,0.5,0.5v0C17,22.8,16.8,23,16.5,23z"></path>
      </g>

      <g id="ico-text-center">
        <path d="M22,8H8C7.7,8,7.5,7.8,7.5,7.5v0C7.5,7.2,7.7,7,8,7h14c0.3,0,0.5,0.2,0.5,0.5v0C22.5,7.8,22.3,8,22,8z"></path>
        <path d="M22.5,11h-15C7.2,11,7,10.8,7,10.5v0C7,10.2,7.2,10,7.5,10h15c0.3,0,0.5,0.2,0.5,0.5v0C23,10.8,22.8,11,22.5,11z"></path>
        <path d="M20.5,14h-11C9.2,14,9,13.8,9,13.5v0C9,13.2,9.2,13,9.5,13h11c0.3,0,0.5,0.2,0.5,0.5v0C21,13.8,20.8,14,20.5,14z"></path>
        <path d="M22,17H8c-0.3,0-0.5-0.2-0.5-0.5v0C7.5,16.2,7.7,16,8,16h14c0.3,0,0.5,0.2,0.5,0.5v0C22.5,16.8,22.3,17,22,17z"></path>
        <path d="M21.5,20h-13C8.2,20,8,19.8,8,19.5v0C8,19.2,8.2,19,8.5,19h13c0.3,0,0.5,0.2,0.5,0.5v0C22,19.8,21.8,20,21.5,20z"></path>
        <path d="M19.5,23h-9c-0.3,0-0.5-0.2-0.5-0.5v0c0-0.3,0.2-0.5,0.5-0.5h9c0.3,0,0.5,0.2,0.5,0.5v0C20,22.8,19.8,23,19.5,23z"></path>
      </g>

      <g id="ico-text-right">
        <path d="M8.5,8h14C22.8,8,23,7.8,23,7.5v0C23,7.2,22.8,7,22.5,7h-14C8.2,7,8,7.2,8,7.5v0C8,7.8,8.2,8,8.5,8z"></path>
        <path d="M7.5,11h15c0.3,0,0.5-0.2,0.5-0.5v0c0-0.3-0.2-0.5-0.5-0.5h-15C7.2,10,7,10.2,7,10.5v0C7,10.8,7.2,11,7.5,11z"></path>
        <path d="M11.5,14h11c0.3,0,0.5-0.2,0.5-0.5v0c0-0.3-0.2-0.5-0.5-0.5h-11c-0.3,0-0.5,0.2-0.5,0.5v0C11,13.8,11.2,14,11.5,14z"></path>
        <path d="M8.5,17h14c0.3,0,0.5-0.2,0.5-0.5v0c0-0.3-0.2-0.5-0.5-0.5h-14C8.2,16,8,16.2,8,16.5v0C8,16.8,8.2,17,8.5,17z"></path>
        <path d="M9.5,20h13c0.3,0,0.5-0.2,0.5-0.5v0c0-0.3-0.2-0.5-0.5-0.5h-13C9.2,19,9,19.2,9,19.5v0C9,19.8,9.2,20,9.5,20z"></path>
        <path d="M13.5,23h9c0.3,0,0.5-0.2,0.5-0.5v0c0-0.3-0.2-0.5-0.5-0.5h-9c-0.3,0-0.5,0.2-0.5,0.5v0C13,22.8,13.2,23,13.5,23z"></path>
      </g>

      <g id="ico-trash">
        <path d="M21.5,8.5H18v-1c0-0.6-0.4-1-1-1h-4c-0.6,0-1,0.4-1,1v1H8.5C8.2,8.5,8,8.7,8,9v1c0,0.3,0.2,0.5,0.5,0.5h13
          c0.3,0,0.5-0.2,0.5-0.5V9C22,8.7,21.8,8.5,21.5,8.5z M13,8.5v-1h4v1H13z"></path>
        <path d="M19.1,21.5h-2l0.8-10h-1l-0.8,10h-2.3l-0.8-10h-1l0.8,10h-2l-0.8-10H9l0.9,11.1c0,0.5,0.5,0.9,1,0.9h8.2c0.5,0,1-0.4,1-0.9
          L21,11.5h-1L19.1,21.5z"></path>
      </g>

      <g id="ico-twitter">
        <path d="M23,10c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1.1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
          c-1.8,0-3.3,1.5-3.3,3.3c0,0.3,0,0.5,0.1,0.7c-2.7-0.1-5.1-1.4-6.8-3.4c-0.3,0.5-0.4,1-0.4,1.6c0,1.1,0.6,2.1,1.5,2.7
          c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2c-0.3,0.1-0.6,0.1-0.9,0.1c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
          c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C22,11.3,22.6,10.7,23,10
          z"></path>
      </g>

      <g id="ico-undo">
        <path d="M12.7,6.6l1.4,1.4l-3.3,3.3H13c6.6,0,10,4,10,12h-2c0-6.8-2.5-10-8-10h-2.2l3.3,3.3l-1.4,1.4L7,12.4L12.7,6.6z"></path>
      </g>

      <g id="ico-upload">
        <polygon points="14,10.8 14,19 16,19 16,10.8 18.3,13.1 19.7,11.7 15,7 10.3,11.7 11.7,13.1   "></polygon>
        <rect x="7" y="21" width="16" height="2"></rect>
      </g>

      <g id="ico-vsco">
        <polygon points="20.7,7 12.3,7 16.5,14.3   "></polygon>
        <polygon points="12.3,23 20.7,23 16.5,15.7   "></polygon>
        <polygon points="11.7,22.6 15.9,15.4 7.5,15.4  "></polygon>
        <polygon points="7.5,14.6 15.9,14.6 11.7,7.4   "></polygon>
        <polygon points="18.7,14.6 22.5,14.6 22.5,7  "></polygon>
        <polygon points="18.7,15.4 22.5,23 22.5,15.4   "></polygon>
      </g>

      <g id="ico-warning">
        <path d="M22.1,20L15.9,9c-0.4-0.7-1.4-0.7-1.7,0L7.9,20c-0.4,0.7,0.1,1.5,0.9,1.5h12.6C22,21.5,22.5,20.7,22.1,20z
         M15.8,11.9L15.6,17h-1.1l-0.2-5.1H15.8z M15,19.9c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9
        C15.9,19.5,15.5,19.9,15,19.9z"></path>
      </g>

      <g id="ico-wifi">
        <path d="M15,10c3.2,0,6.2,1.2,8.5,3.5l0,0l1.4-1.4l0,0C22.3,9.5,18.7,8,15,8c-3.7,0-7.3,1.5-9.9,4.1l1.4,1.4
          C8.8,11.2,11.8,10,15,10z"></path>
        <path d="M15,14c2.1,0,4.1,0.8,5.7,2.3l1.4-1.4l0,0C20.2,13,17.7,12,15,12c-2.7,0-5.2,1-7.1,2.9l1.4,1.4C10.9,14.8,12.9,14,15,14z"></path>
        <path d="M15,18c1.1,0,2.1,0.4,2.8,1.2l1.4-1.4C18.1,16.6,16.6,16,15,16c-1.6,0-3.1,0.6-4.2,1.8l1.4,1.4C12.9,18.4,13.9,18,15,18z"></path>
        <path d="M16.4,20.6L16.4,20.6c-0.8-0.8-2-0.8-2.8,0L15,22L16.4,20.6z"></path>
      </g>

      <g id="ico-wifi-off">
        <path d="M24.9,13.4c-1.1-1.1-2.4-2-3.8-2.7L20,12.4c1.3,0.6,2.5,1.4,3.5,2.4c0,0,0,0,0,0L24.9,13.4L24.9,13.4z"></path>
        <path d="M18.9,14.1l-1.1,1.7c1.1,0.4,2,1,2.8,1.8l1.4-1.4l0,0C21.1,15.3,20.1,14.6,18.9,14.1z"></path>
        <path d="M15.6,19.4c0.8,0.1,1.6,0.5,2.2,1.1l1.4-1.4c-0.7-0.7-1.6-1.2-2.5-1.5L15.6,19.4z"></path>
        <path d="M14.3,21.4l-0.4,0.7l1.2,1.2l1.4-1.4C15.8,21.3,15,21.2,14.3,21.4z"></path>
        <path d="M20.6,6l-2.3,3.7c-1.1-0.3-2.1-0.4-3.3-0.4c-3.7,0-7.3,1.5-9.9,4.1l1.4,1.4c2.3-2.3,5.3-3.5,8.5-3.5c0.7,0,1.4,0.1,2.1,0.2
          l-1.2,1.8c-0.3,0-0.6-0.1-0.9-0.1c-2.7,0-5.2,1-7.1,2.9l1.4,1.4c1.4-1.4,3.3-2.3,5.4-2.3l-1.4,2.3c-0.9,0.3-1.8,0.8-2.5,1.5l1,1
          l-2.2,3.4l0.8,0.5l11-17.4L20.6,6z"></path>
      </g>

      <g id="ico-wrench">
        <path d="M19,14.5L16,14l-0.5-3l3.6-3.6c-0.4-0.1-0.9-0.2-1.3-0.2c-2.8,0-5,2.2-5,5c0,0.8,0.2,1.6,0.6,2.3l-5.6,5.6
        c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l5.6-5.6c0.7,0.4,1.5,0.6,2.3,0.6c2.8,0,5-2.2,5-5
        c0-0.5-0.1-0.9-0.2-1.3L19,14.5z"></path>
      </g>

      <g id="ico-zoom-in">
        <path d="M22.4,20.9l-4.1-4.1c-0.4,0.5-0.9,1-1.4,1.4l4.1,4.1c0.2,0.2,0.5,0.2,0.7,0l0.7-0.7C22.5,21.5,22.5,21.1,22.4,20.9z"></path>
        <path d="M18.5,13c0-3-2.5-5.5-5.5-5.5S7.5,10,7.5,13c0,3,2.5,5.5,5.5,5.5S18.5,16,18.5,13z M13,17.5c-2.5,0-4.5-2-4.5-4.5
          s2-4.5,4.5-4.5s4.5,2,4.5,4.5S15.5,17.5,13,17.5z"></path>
        <polygon points="13.5,10 12.5,10 12.5,12.5 10,12.5 10,13.5 12.5,13.5 12.5,16 13.5,16 13.5,13.5 16,13.5 16,12.5 13.5,12.5  "></polygon>
      </g>

      <g id="ico-zoom-out">
        <path d="M22.4,20.9l-4.1-4.1c-0.4,0.5-0.9,1-1.4,1.4l4.1,4.1c0.2,0.2,0.5,0.2,0.7,0l0.7-0.7C22.5,21.5,22.5,21.1,22.4,20.9z"></path>
        <path d="M18.5,13c0-3-2.5-5.5-5.5-5.5S7.5,10,7.5,13c0,3,2.5,5.5,5.5,5.5S18.5,16,18.5,13z M13,17.5c-2.5,0-4.5-2-4.5-4.5
          s2-4.5,4.5-4.5s4.5,2,4.5,4.5S15.5,17.5,13,17.5z"></path>
        <rect x="10" y="12.5" width="6" height="1"></rect>
      </g>

    </defs>
  </svg>
<!-- /SVG -->

<div class="container">
  <header class="header">
    <h1>Button style tester</h1>
  </header>
  <div class="column-wrapper">
    <div class="color-picker">
      <h2>Change Color</h2>
      <div class="color light-grey color-selected">light-grey</div>
      <div class="color mid-grey">mid-grey</div>
      <div class="color dark-grey">dark-grey</div>
      <div class="color off-black">off-black</div>
      <div class="color red">red</div>
      <div class="color orange">orange</div>
      <div class="color yellow">yellow</div>
      <div class="color forest-green">forest-green</div>
      <div class="color green">green</div>
      <div class="color teal">teal</div>
      <div class="color blue">blue</div>
      <div class="color cyan">cyan</div>
      <div class="color dark-cyan">dark-cyan</div>
      <div class="color midnight">midnight</div>
      <div class="color indigo">indigo</div>
      <div class="color purple">purple</div>
    </div>
    
    <div class="style-picker">
      <h2 style="margin-top: 20px;">Change Style</h2>
      <div class="style one style-selected">one</div>
      <div class="style two">two</div>
      <div class="style three">three</div>
      <div class="style four">four</div>
      <div class="style five">five</div>
      <div class="style six">six</div>
    </div>
    
    <div class="size-picker">
      <h2 style="margin-top: 20px;">Change Size</h2>
      <div class="size normal size-selected">normal</div>
      <div class="size large">large</div>
      <div class="size extra-large">extra-large</div>
    </div>
  </div><!-- /.column-wrapper -->

  <div class="column-wrapper">
    <div class="buttons-wrapper style-one color-light-grey size-normal">
      <div class="icon-buttons">
        <button class="button icon">
          <svg viewBox="0 0 30 30" class="ico-twitter">
            <use xlink:href="#ico-twitter"></use>
          </svg>
        </button>
        <button class="button icon">
          <svg viewBox="0 0 30 30" class="ico-document">
            <use xlink:href="#ico-document"></use>
          </svg>
        </button>
        <button class="button icon">
          <svg viewBox="0 0 30 30" class="ico-settings">
            <use xlink:href="#ico-settings"></use>
          </svg>
        </button>
      </div>
      <button class="button">Test Button</button>
      <button class="button uppercase">Test Button</button>
    </div><!-- /.buttons-wrapper -->
  </div><!-- /.column-wrapper -->
</div><!-- /.container -->

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);

// COLORS

$red: #ed1c24;
$orange: #ff6600;
$yellow: #ffcc00;
$forest-green: #666600;
$green: #51b848;
$teal: #006666;
$blue: #0090cb;
$cyan: #00ccff;
$dark-cyan: darken($cyan, 10%);
$midnight: #002B38;
$indigo: #2a1e5c;
$purple: #66439a;

$black: #000;
$off-black: #111;
$dark-grey: #666;
$mid-grey: #aaa;
$light-grey: #ccc;
$off-white: #eee;
$white: #fff;

body { 
  font-family: 'Source Sans Pro', sans-serif; 
  background: $off-white;
}

*, *:before, *:after { box-sizing: border-box; }

h1,
h2 {
  margin: 0 0 10px 0;
}

h1 { font-size: 24px; }

h2 {
  width: 100%;
  float: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: $mid-grey;
}

%clearfix {
	zoom: 1;
	&:after,
	&:before {
		content: "";
		display: table;
	}
	&:after { clear: both; }
}

@mixin linear-gradient($from, $to) {
	background-color: $to;
	background-image:-moz-linear-gradient($from, $to);
	background-image:-o-linear-gradient($from, $to);
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
	background-image: -webkit-linear-gradient($from, $to);
	background-image: -ms-linear-gradient($from, $to);
	background-image: linear-gradient($from, $to);
}

%unstyled-button{
	border: none;
	border-image-source: none;
	border-image-slice: none;
	border-image-width: none;
	border-image-outset: none;
	border-image-repeat: none;
}

%button-style {
  @extend %unstyled-button;
  position: relative;
  display: inline-block;
  width: auto;
  height: 30px;
  padding: 0 10px;
  font-size: 14px;
  text-decoration: none;
  line-height: 30px;
  cursor: pointer;

  &:focus { outline: 0; }

  &:disabled,
  &[disabled=disabled] {
    opacity: 0.4;

    &:hover,
    &:active { cursor: default; }
  }
}

.button { 
  @extend %button-style;
  background: transparent; 
  color: $off-black; 
  margin: 0 10px 10px 0;
  border: 0px solid transparent;
  
  &.uppercase {
    text-transform: uppercase; 
    font-weight: 600;
    letter-spacing: 1px;
  }
  
  &.icon { 
  padding: 0; 
  
    svg {
      width: 30px;
      height: 30px;
    }
  }
}

.size-large .button {
  font-size: 17px;
  padding: 0 14px;
  height: 40px;
  
  &.icon {
    padding: 0;
    
    svg {
      width: 40px;
      height: 40px;
    }
  }
}

.size-extra-large .button {
  font-size: 22px;
  padding: 0 20px;
  height: 50px;
  
  &.icon {
    padding: 0;
    
    svg {
      width: 50px;
      height: 50px;
    }
  }
}


// style mixin
@mixin button-styles($main-color, $contrast-color) {
  .button { 
    background: $main-color;
    color: $contrast-color;
    @if $contrast-color == $off-white{
      text-shadow: 1px 1px 0 rgba($off-black, 0.2);
    }
  }
  
  &.style-one .button {
    background: none;
    color: $main-color;
    text-shadow: none;
    padding: 0;
    svg { fill: $main-color; }
    
    &:hover {
      color: lighten($main-color, 10);
      svg { fill: lighten($main-color, 10); }
    }
    
    &:active {
      color: darken($main-color, 10);
      svg { fill: darken($main-color, 10); }
    }
  }
  
  &.style-two .button {
    background: $main-color;
    color: $contrast-color;
    svg { fill: $contrast-color; }
    
    &:hover  { background: lighten($main-color, 10); }
    &:active { background: darken($main-color, 10); } 
  }
  
  &.style-three .button {
    background: $main-color;
    border-radius: 4px;
    color: $contrast-color;
    svg { fill: $contrast-color; }
    
    &:hover  { background: lighten($main-color, 10); }
    &:active { background: darken($main-color, 10); }
  }
  
  &.style-four .button {
    background: $main-color;
    border-radius: 4px;
    color: $contrast-color;
    line-height: 28px;
    border: 1px solid darken($main-color, 10);
    svg { fill: $contrast-color; } 
    
    &:hover  { background: lighten($main-color, 10); }
    &:active { background: darken($main-color, 10); }
  }
  
  &.style-five .button {
    background: $main-color;
    border-radius: 4px;
    color: $contrast-color;
    line-height: 28px;
    border: 1px solid darken($main-color, 10);
    box-shadow: 2px 2px 3px rgba($off-black, .2);
    svg { fill: $contrast-color; }
    
    &:hover  { background: lighten($main-color, 10); }
    &:active { background: darken($main-color, 10); }
  }
  
  &.style-six .button {
    @include linear-gradient(lighten($main-color, 10), darken($main-color, 10));
    border-radius: 4px;
    color: $contrast-color;
    line-height: 28px;
    border: 1px solid darken($main-color, 10);
    box-shadow: 2px 2px 3px rgba($off-black, .2);
    svg { fill: $contrast-color; }
    
    &:hover  { 
      @include linear-gradient(lighten($main-color, 20), $main-color);
    }
    &:active { 
      @include linear-gradient(darken($main-color, 10), $main-color);
    }
  }
}

.color-light-grey   { @include button-styles($light-grey, $off-black); }
.color-mid-grey     { @include button-styles($mid-grey, $off-black); }
.color-dark-grey    { @include button-styles($dark-grey, $off-white); }
.color-off-black    { @include button-styles($off-black, $off-white); }
.color-red          { @include button-styles($red, $off-white); }
.color-orange       { @include button-styles($orange, $off-white); }
.color-yellow       { @include button-styles($yellow, $off-black); }
.color-forest-green { @include button-styles($forest-green, $off-white); }
.color-green        { @include button-styles($green, $off-white); }
.color-teal         { @include button-styles($teal, $off-white); }
.color-blue         { @include button-styles($blue, $off-white); }
.color-cyan         { @include button-styles($cyan, $off-black); }
.color-dark-cyan    { @include button-styles($dark-cyan, $off-white); }
.color-midnight     { @include button-styles($midnight, $off-white); }
.color-indigo       { @include button-styles($indigo, $off-white); }
.color-purple       { @include button-styles($purple, $off-white); }

.container {
  width: 100%;
  max-width: 1000px;
  padding: 20px 30px 0;
  height: auto;
  margin: 0 auto;
  @extend %clearfix;
}

.header {
  width: 100%; 
  border-bottom: 2px solid $blue;
  margin-bottom: 40px;
}

.column-wrapper {
  width: 48%;
  height: auto;
  float: left;
  @extend %clearfix;
  
  &:nth-child(2) { margin-right: 2%; }
  &:nth-child(3) { margin-left: 2%; }
}

// Controls

.color-picker,
.style-picker,
.size-picker {
  width: 100%;
  height: auto;
  @extend %clearfix;
}

.color {
  width: percentage(1/8);
  height: 30px;
  color: transparent;
  float: left;
  border: 2px solid $off-white;
  transition: 200ms ease all;
  
  &.off-black { background: $off-black; }
  &.dark-grey { background: $dark-grey; }
  &.mid-grey { background: $mid-grey; }
  &.light-grey { background: $light-grey; }
  &.red { background: $red; }
  &.orange { background: $orange; }
  &.yellow { background: $yellow; }
  &.forest-green { background: $forest-green; }
  &.green { background: $green; }
  &.teal { background: $teal; }
  &.blue { background: $blue; }
  &.cyan { background: $cyan; }
  &.dark-cyan { background: $dark-cyan; }
  &.midnight { background: $midnight; }
  &.indigo { background: $indigo; }
  &.purple { background: $purple; }
  
  &:hover { 
    cursor: pointer; 
    border: 0 solid $off-white;
  }
  
  &.color-selected { border: 0 solid $off-white; }
}

.style {
  width: percentage(1/3);
  height: auto;
  padding: 7px 0 8px 0;
  border: 2px solid $off-white;
  color: $off-black;
  float: left;
  background: $light-grey;
  text-align: center;
  transition: 150ms ease all;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  
  &:hover { 
    cursor: pointer; 
    background: darken($light-grey, 10);
  }
  
  &.style-selected { 
    background: $blue; 
    color: $white;
  }
}

.size {
  width: percentage(1/3);
  height: auto;
  padding: 7px 0 8px 0;
  border: 2px solid $off-white;
  color: $off-black;
  float: left;
  background: $light-grey;
  text-align: center;
  transition: 150ms ease all;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  
  &:hover { 
    cursor: pointer; 
    background: darken($light-grey, 10);
  }
  
  &.size-selected { 
    background: $blue; 
    color: $white;
  }
}

.buttons-wrapper {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 40px;
  background: $white;
  @extend %clearfix;
}

JS

              
                $(document).ready(function() {
  // Color Picker Click
  $(".color-picker").on("click", ".color", function() {
    //console.log( $(this).text() );
    $(".color").removeClass("color-selected");
    $(this).addClass("color-selected");
    $(".buttons-wrapper").removeClass(function (index, css) {
      return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
    });
    $(".buttons-wrapper").addClass( "color-" + $(this).text() );
  });
  // Style Picker Click
  $(".style-picker").on("click", ".style", function() {
    $(".style").removeClass("style-selected");
    $(this).addClass("style-selected");
    $(".buttons-wrapper").removeClass(function (index, css) {
      return (css.match (/(^|\s)style-\S+/g) || []).join(' ');
    });
    $(".buttons-wrapper").addClass( "style-" + $(this).text() );
  });
  // Size Picker Click
  $(".size-picker").on("click", ".size", function() {
    $(".size").removeClass("size-selected");
    $(this).addClass("size-selected");
    $(".buttons-wrapper").removeClass(function (index, css) {
      return (css.match (/(^|\s)size-\S+/g) || []).join(' ');
    });
    $(".buttons-wrapper").addClass( "size-" + $(this).text() );
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions