icon.markdown

layout	title	icons
pattern	Icon	label id Alert alert label id Arrow Left arrow-left label id Arrow Right arrow-right label id Check check label id Chevron Down chevron-down label id Close close label id Expand expand label id Label Tree label-tree label id Lock lock label id Map map label id Menu menu label id Minimize minimize label id Minus minus label id Plus plus label id Search search label id Edit edit label id Image image label id Download download

Icon

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

{% for icon in page.icons %}

{{ icon.label }}
icon-{{ icon.id }}

{% endfor %}

<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)