sfgov-design-system
Version:
This is the design system for [SF.gov](https://sf.gov) and the City & County of San Francisco.
49 lines (47 loc) • 1.45 kB
HTML
---
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>