Icon

This toolkit includes a custom library of icons to accompany content where appropriate. These icons will inherit the parent element's text color where specified by the icon designer.

  • arrow-right
  • arrow-left
  • arrow-down
  • arrow-up
  • attachment
  • check
  • cloud-four
  • close
  • dot
  • envelope
  • facebook
  • flickr
  • github
  • heart
  • instagram
  • lanyrd
  • link
  • linkedin
  • notification
  • notifications
  • notifications-off
  • plus
  • reply
  • return
  • search
  • speakerdeck
  • twitter

Icons that use currentColor will inherit the parent element's text color.

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon">
  <path d="M6.75,15.12a4.36,4.36,0,0,1-1.91-2.29,1.86,1.86,0,0,1,.52-1c0.48-.55,6.07-6.63,8.44-7.67A11.75,11.75,0,0,0,11.92,4c-7,0-7.67,5-7.67,5S0,10.3,0,14.18C0,19.73,6.84,20,6.84,20A15.3,15.3,0,0,0,9,19.92a1.29,1.29,0,0,0,.89-0.71c0.41-1,1-2.59,1.58-4.26C9.2,15.06,7,15.17,6.75,15.12Z"
  />
  <path d="M24,13c0-4.91-4.81-5.44-4.81-5.44a6.11,6.11,0,0,0-2.14-2.2c-0.43,1.53-1.54,5.61-1.6,6.38h1.68s0.27,0,.2.33c-0.16.75-.58,2.58-1.48,2.64l-1.18.07c-0.33,1.35-.68,2.76-0.93,3.78a4.7,4.7,0,0,0,3,.91,4.59,4.59,0,0,0,3.35-1.23C24.14,17.56,24,13,24,13Z"
  />
  <path d="M13.89,6.86A42.33,42.33,0,0,0,8.9,12l3.61-.14c0.74-2.08,1.38-3.93,1.66-4.74A0.3,0.3,0,0,0,13.89,6.86Z"
  />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon">
  <path d="M0,5c0-1.1,0.9-2,2-2h20c1.1,0,2,0.9,2,2v2c0,0-7.9,5-12,5C8.1,12,0,7,0,7V5z"
  />
  <path d="M24,17c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V9c0,0,7.9,5,12,5c3.9,0,12-5,12-5V17z"
  />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"
    />
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"
    />
  </g>
</svg>

You can make icons larger with the .Icon--large modifier.

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
  <path d="M6.75,15.12a4.36,4.36,0,0,1-1.91-2.29,1.86,1.86,0,0,1,.52-1c0.48-.55,6.07-6.63,8.44-7.67A11.75,11.75,0,0,0,11.92,4c-7,0-7.67,5-7.67,5S0,10.3,0,14.18C0,19.73,6.84,20,6.84,20A15.3,15.3,0,0,0,9,19.92a1.29,1.29,0,0,0,.89-0.71c0.41-1,1-2.59,1.58-4.26C9.2,15.06,7,15.17,6.75,15.12Z"
  />
  <path d="M24,13c0-4.91-4.81-5.44-4.81-5.44a6.11,6.11,0,0,0-2.14-2.2c-0.43,1.53-1.54,5.61-1.6,6.38h1.68s0.27,0,.2.33c-0.16.75-.58,2.58-1.48,2.64l-1.18.07c-0.33,1.35-.68,2.76-0.93,3.78a4.7,4.7,0,0,0,3,.91,4.59,4.59,0,0,0,3.35-1.23C24.14,17.56,24,13,24,13Z"
  />
  <path d="M13.89,6.86A42.33,42.33,0,0,0,8.9,12l3.61-.14c0.74-2.08,1.38-3.93,1.66-4.74A0.3,0.3,0,0,0,13.89,6.86Z"
  />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
  <path d="M0,5c0-1.1,0.9-2,2-2h20c1.1,0,2,0.9,2,2v2c0,0-7.9,5-12,5C8.1,12,0,7,0,7V5z"
  />
  <path d="M24,17c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V9c0,0,7.9,5,12,5c3.9,0,12-5,12-5V17z"
  />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"
    />
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"
    />
  </g>
</svg>