---
title: Icon library
see_also:
  - title: Icon usage
    href: /usage/icons/
---

{% from 'macros.njk' import tooltip %}
<div class="flex flex-wrap">
  {% for icon in icons -%}
    <div class="w-1/2 lg:w-1/3 mb-80">
      <div class="mx-28 no-underline text-center text-slate">
        <div class="flex justify-around mb-4">
          <sfgov-icon
            class="p-20 lg:p-60 xl:p-80 border-1 border-solid border-grey-2"
            width="28"
            height="28"
            symbol="{{ icon.symbol }}"
          ></sfgov-icon>
        </div>
        <clipboard-copy
          class="cursor-pointer block relative"
          value="{{ icon.symbol }}"
        >
          <button
            class="cursor-pointer btn-block group py-4 relative border-0 bg-none hocus:bg-slate-1"
            aria-label='Copy "{{ icon.symbol }}"'
          >
            <div class="w-full text-slate-4 font-mono pl-20">{{ icon.symbol }}</div>
            <sfgov-icon
              symbol="clipboard"
              class="text-slate-3 invisible group-hocus:visible"
              width="20"
              height="16"
            ></sfgov-icon>
            {{
              tooltip('Copy', {
                class: 'absolute top-full right-0 mt-4',
                'aria-hidden': true,
                'data-copy-feedback': 'Copied'
              }) | safe
            }}
          </button>
        </clipboard-copy>
      </div>
    </div>
  {% endfor %}
</div>