Default

SVG icons with class Icon display as an inline-block element. They inherit the color and font-size of the surrounding text.

Alert

Messages

<p>
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M948 823c8 11.3 12 23.7 12 37 0 18-6.3 33.2-19 45.5S913.3 924 896 924H64c-23.3 0-41.7-10.3-55-31-12.7-20-13-41-1-63L424 61c12-22 30.7-33 56-33s44 11 56 33l412 762zM478 610h3c9.3 0 18-3.8 26-11.5s12.7-16.5 14-26.5c8-43.3 18.7-126.3 32-249 .7-8.7-1.8-17-7.5-25s-13.2-13-22.5-15c-28-5.3-56.3-5.3-85 0-8.7 2-16.2 7-22.5 15s-9.2 16.3-8.5 25c13.3 122.7 24 205.7 32 249 1.3 10 6 18.8 14 26.5s16.3 11.5 25 11.5zm2 227c20 0 37-7 51-21s21-31 21-51-7-37-21-51-31-21-51-21-37 7-51 21-21 31-21 51 7 37 21 51 31 21 51 21z" />
  </svg>
  Alert
</p>

<h2>
  <svg viewBox="0 0 960 960" role="presentation" class="Icon"><path d="M915 213c8.7 54.7 13 112.7 13 174 0 60.7-4.3 118-13 172-5.3 35.3-24.8 67.7-58.5 97s-69.2 46-106.5 50c-73.3 7.3-145.7 11.3-217 12L342 903c-6 6-13.3 9-22 9-3.3 0-7.7-.7-13-2-12.7-5.3-19-15.3-19-30V716l-78-6c-36.7-4-72-21.2-106-51.5S50 595 44 559c-8-56-12-113-12-171 0-60 4-118.3 12-175 6-36 26-69.2 60-99.5S173.3 66 210 62c93.3-9.3 183.3-14 270-14s176.7 4.7 270 14c36.7 4 72 21.2 106 51.5s53.7 63.5 59 99.5z"/></svg>
  Messages
</h2>

<button class="Button Button--primary">
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
  </svg>
  Save
</button>

Custom

Customize icon appearance to be different than inherited properties with color and font-size utility classes.

Black text with a green icon.

Large text with a small icon.

<p>
  <svg viewBox="0 0 960 960" role="presentation" class="Icon u-colorPositive">
    <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
  </svg>
  Black text with a green icon.
</p>

<h1>
  <svg viewBox="0 0 960 960" role="presentation" class="Icon u-fontSizeSm"><path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z"/></svg>
  Large text with a small icon.
</h1>

Loader

Add modifier Icon--loader to the "loader" icon for an animated SVG icon that inherits parent text color and size.

Heading element with loading icon

<button class="Button Button--smallSquare Button--primary">
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader">
    <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24" />
  </svg>
</button>

<h1>
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader">
   <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24"/>
</svg>
  Heading element with loading icon
</h1>

<button class="Button Button--large">
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader u-spaceRightSm">
    <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24" />
  </svg>
  Loading
</button>

Web Style Guide

Getting Started

Design Elements

Utilities

Components