Icon

<svg class="icon" width="24" height="24">
  <use xlink:href="#icon-map"></use>
</svg>

Alert
icon-alert

Arrow Left
icon-arrow-left

Arrow Right
icon-arrow-right

Check
icon-check

Chevron Down
icon-chevron-down

Close
icon-close

Expand
icon-expand

Label Tree
icon-label-tree

Lock
icon-lock

Map
icon-map

Menu
icon-menu

Minimize
icon-minimize

Minus
icon-minus

Plus
icon-plus

Search
icon-search

Edit
icon-edit

Image
icon-image

Download
icon-download

<svg
  class="icon icon--large"
  width="24" height="24"
  >
  <use xlink:href="#icon-check"></use>
</svg>

<svg
  class="icon icon--small"
  width="24" height="24"
  >
  <use xlink:href="#icon-check"></use>
</svg>

<svg
  class="icon icon--extra-small"
  width="24" height="24"
  >
  <use xlink:href="#icon-check"></use>
</svg>

<a href="/">
  <svg aria-label="Show map" class="icon" width="24" height="24">
    <use xlink:href="#icon-map"></use>
  </svg>
</a>

If an icon is used in place of text content, you can use an aria-label attribute to make the text available for software–such as screen readers and search engines. (Similar to an alt attribute for an <img /> element)