A digital services project by FlexionIcon
layoutUSWDS-derived
SVG icon from the USWDS icon sprite. Scales with text by default.
Reference: USWDS documentation ↗
Variants
accessible Icon
<svg class="flex-icon" data-size="4" role="img" aria-label="Warning" focusable="false">
<use href="/static/sprite.svg#warning">
</use>
</svg>default Icons
<div class="l-cluster">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#check_circle">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#warning">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#error">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#close">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#search">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_next">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_before">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#add">
</use>
</svg>
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#remove">
</use>
</svg>
</div>icon In Text
Click the icon to configure.
<p>Click the
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#settings">
</use>
</svg> icon to configure.
</p>sized Icons
<div class="l-cluster">
<svg class="flex-icon" data-size="3" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
<svg class="flex-icon" data-size="4" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
<svg class="flex-icon" data-size="5" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
<svg class="flex-icon" data-size="6" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
<svg class="flex-icon" data-size="7" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#info">
</use>
</svg>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-icon | .flex-icon | SVG icon from USWDS sprite |
Verified properties
widthheightBehavior promises
- ✓ Decorative icons have aria-hidden="true"
- ✓ Meaningful icons have role="img" and aria-label
Source CSS
.flex-icon {
display: inline-block;
inline-size: 1em;
block-size: 1em;
fill: currentColor;
vertical-align: middle;
overflow: hidden;
&[data-size="3"] {
inline-size: 1.5rem;
block-size: 1.5rem;
}
&[data-size="4"] {
inline-size: 2rem;
block-size: 2rem;
}
&[data-size="5"] {
inline-size: 2.5rem;
block-size: 2.5rem;
}
&[data-size="6"] {
inline-size: 3rem;
block-size: 3rem;
}
&[data-size="7"] {
inline-size: 3.5rem;
block-size: 3.5rem;
}
&[data-size="8"] {
inline-size: 4rem;
block-size: 4rem;
}
&[data-size="9"] {
inline-size: 4.5rem;
block-size: 4.5rem;
}
}