Icons
Custom element
Our icons are published as both a SVG files and a custom element for
the web. The simplest way to use our icons is with the <sfgov-icon> custom
element, which is defined in our main JavaScript
bundle.
Loading...
Code editor
info
Both the sfds.css and icons.css CSS bundles style the
<sfgov-icon> element by name. If you're not using either of these, you'll need to apply
the same CSS to get the
expected positioning, alignment, and color.
Attributes
The <sfgov-icon> element respects the following attributes:
| Attribute | Default | Notes |
|---|---|---|
symbol | A valid symbol ID (required) | |
height | 20 | The height of the <svg> element in pixels, determined by the icon's intrinsic size unless width is also specified |
width | Tthe width of the <svg> element in pixels, determined by the icon's intrinsic size unless height is also specified | |
role | img | The ARIA role of the element |
Icon color
Use the text-* color to change the fill color of <sfgov-icon> shapes. This works because the
custom element styles its SVG elements with fill: currentColor.
Loading...
Code editor
Symbols
| Icon | Symbol | HTML | SVG |
|---|---|---|---|
accessibility | <sfgov-icon symbol="accessibility"></sfgov-icon> | accessibility.svg | |
alert | <sfgov-icon symbol="alert"></sfgov-icon> | alert.svg | |
archive | <sfgov-icon symbol="archive"></sfgov-icon> | archive.svg | |
arrow-down | <sfgov-icon symbol="arrow-down"></sfgov-icon> | arrow-down.svg | |
arrow-left | <sfgov-icon symbol="arrow-left"></sfgov-icon> | arrow-left.svg | |
arrow-right | <sfgov-icon symbol="arrow-right"></sfgov-icon> | arrow-right.svg | |
arrow-up | <sfgov-icon symbol="arrow-up"></sfgov-icon> | arrow-up.svg | |
building | <sfgov-icon symbol="building"></sfgov-icon> | building.svg | |
calendar | <sfgov-icon symbol="calendar"></sfgov-icon> | calendar.svg | |
caution | <sfgov-icon symbol="caution"></sfgov-icon> | caution.svg | |
chart | <sfgov-icon symbol="chart"></sfgov-icon> | chart.svg | |
check | <sfgov-icon symbol="check"></sfgov-icon> | check.svg | |
chevron-down | <sfgov-icon symbol="chevron-down"></sfgov-icon> | chevron-down.svg | |
chevron-left | <sfgov-icon symbol="chevron-left"></sfgov-icon> | chevron-left.svg | |
chevron-right | <sfgov-icon symbol="chevron-right"></sfgov-icon> | chevron-right.svg | |
chevron-up | <sfgov-icon symbol="chevron-up"></sfgov-icon> | chevron-up.svg | |
clock | <sfgov-icon symbol="clock"></sfgov-icon> | clock.svg | |
close | <sfgov-icon symbol="close"></sfgov-icon> | close.svg | |
document | <sfgov-icon symbol="document"></sfgov-icon> | document.svg | |
globe | <sfgov-icon symbol="globe"></sfgov-icon> | globe.svg | |
hamburger-button | <sfgov-icon symbol="hamburger-button"></sfgov-icon> | hamburger-button.svg | |
info | <sfgov-icon symbol="info"></sfgov-icon> | info.svg | |
location | <sfgov-icon symbol="location"></sfgov-icon> | location.svg | |
mail | <sfgov-icon symbol="mail"></sfgov-icon> | mail.svg | |
minus | <sfgov-icon symbol="minus"></sfgov-icon> | minus.svg | |
pencil | <sfgov-icon symbol="pencil"></sfgov-icon> | pencil.svg | |
phone | <sfgov-icon symbol="phone"></sfgov-icon> | phone.svg | |
plus | <sfgov-icon symbol="plus"></sfgov-icon> | plus.svg | |
question | <sfgov-icon symbol="question"></sfgov-icon> | question.svg | |
search | <sfgov-icon symbol="search"></sfgov-icon> | search.svg | |
wip | <sfgov-icon symbol="wip"></sfgov-icon> | wip.svg |