Components
Icon
Icons help communicate meaning, actions, status, or feedback.
About the icon component
Icons are a simple, easily graspable way to add visual emphasis or interest, signal an action, or indicate a feedback state — all while reducing a user’s cognitive load.
Using a consistent set of icons helps establish a familiar look and feel across a site or service, while using individual icons consistently establishes a reliable relationship between the image and a specific concept or action. For example, don’t use an envelope icon to indicate email on one page and mailing address on another. Users should be able to trust that a certain icon always means the same thing, no matter where it’s used on your site. It’s important that icons always serve a single functional purpose throughout a site or service.
242 icons. Click an icon to copy its code snippet.
<div role="region" aria-atomic="true">
<label for="icon-filter">Type to filter icons</label>
<input
class="usa-input"
id="icon-filter"
class="usa-input"
onkeyup="filter(this)"
/>
<p class="text-base" aria-live="polite">
<span id="icon-count">242 icons.</span> Click an icon to copy its code
snippet.
</p>
</div>
<div class="display-flex flex-wrap margin-top-5">
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="accessibility_new accessible"
aria-label="accessibility_new icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>accessibility_new</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="accessible_forward accessible wheelchair"
aria-label="accessible_forward icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#accessible_forward"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>accessible_forward</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="account_balance finance institution"
aria-label="account_balance icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#account_balance"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>account_balance</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="account_box user identity identification"
aria-label="account_box icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#account_box"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>account_box</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="account_circle user"
aria-label="account_circle icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#account_circle"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>account_circle</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="add plus open"
aria-label="add icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#add"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>add</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="add_circle plus open"
aria-label="add_circle icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#add_circle"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>add_circle</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="add_circle_outline plus open"
aria-label="add_circle_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#add_circle_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>add_circle_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="alarm clock time"
aria-label="alarm icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#alarm"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>alarm</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="alternate_email at-sign"
aria-label="alternate_email icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#alternate_email"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>alternate_email</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="announcement exclamation"
aria-label="announcement icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#announcement"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>announcement</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_back navigation direction"
aria-label="arrow_back icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_back"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_back</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_downward navigation direction"
aria-label="arrow_downward icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_downward</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_drop_down carrot caret"
aria-label="arrow_drop_down icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_drop_down"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_drop_down</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_drop_up carrot caret"
aria-label="arrow_drop_up icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_drop_up"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_drop_up</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_forward navigation direction"
aria-label="arrow_forward icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_forward"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_forward</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="arrow_upward navigation direction"
aria-label="arrow_upward icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#arrow_upward"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>arrow_upward</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="api application programming interface"
aria-label="api icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#api"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>api</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="assessment metrics bar chart test results"
aria-label="assessment icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#assessment"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>assessment</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="attach_file paperclip"
aria-label="attach_file icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#attach_file"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>attach_file</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="attach_money dollar sign cash financial"
aria-label="attach_money icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#attach_money"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>attach_money</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="autorenew refresh"
aria-label="autorenew icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#autorenew"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>autorenew</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="backpack bag emergency kit"
aria-label="backpack icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#backpack"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>backpack</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="bathtub bathe shower hygiene"
aria-label="bathtub icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#bathtub"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>bathtub</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="bedding blanket"
aria-label="bedding icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#bedding"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>bedding</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="bookmark "
aria-label="bookmark icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#bookmark"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>bookmark</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="bug_report "
aria-label="bug_report icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#bug_report"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>bug_report</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="build wrench"
aria-label="build icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#build"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>build</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="calendar_today date"
aria-label="calendar_today icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#calendar_today"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>calendar_today</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="campaign bullhorn"
aria-label="campaign icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#campaign"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>campaign</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="camping tent shelter"
aria-label="camping icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#camping"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>camping</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="cancel x close"
aria-label="cancel icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#cancel"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>cancel</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="chat comment"
aria-label="chat icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#chat"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>chat</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="check done complete"
aria-label="check icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#check"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>check</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="check_box_outline_blank square"
aria-label="check_box_outline_blank icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#check_box_outline_blank"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>check_box_outline_blank</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="check_circle done complete"
aria-label="check_circle icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#check_circle"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>check_circle</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="check_circle_outline done complete"
aria-label="check_circle_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#check_circle_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>check_circle_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="checkroom coathanger"
aria-label="checkroom icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#checkroom"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>checkroom</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="clean_hands sanitize wash soap"
aria-label="clean_hands icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#clean_hands"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>clean_hands</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="clothes shirt sweater clothing"
aria-label="clothes icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#clothes"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>clothes</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="close x"
aria-label="close icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#close"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>close</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="closed_caption cc video accessiblity"
aria-label="closed_caption icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#closed_caption"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>closed_caption</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="cloud "
aria-label="cloud icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#cloud"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>cloud</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="code "
aria-label="code icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#code"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>code</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="comment chat"
aria-label="comment icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#comment"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>comment</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="connect_without_contact "
aria-label="connect_without_contact icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#connect_without_contact"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>connect_without_contact</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="construction tool"
aria-label="construction icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#construction"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>construction</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="construction_worker maintenance"
aria-label="construction_worker icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#construction_worker"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>construction_worker</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="contact_page "
aria-label="contact_page icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#contact_page"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>contact_page</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="content_copy "
aria-label="content_copy icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#content_copy"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>content_copy</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="coronavirus "
aria-label="coronavirus icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#coronavirus"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>coronavirus</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="credit_card payment"
aria-label="credit_card icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#credit_card"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>credit_card</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="deck patio dine dining bar"
aria-label="deck icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#deck"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>deck</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="delete trash"
aria-label="delete icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#delete"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>delete</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="device_thermostat "
aria-label="device_thermostat icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#device_thermostat"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>device_thermostat</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="directions arrow"
aria-label="directions icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#directions"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>directions</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="directions_bike bicycle transportation"
aria-label="directions_bike icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#directions_bike"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>directions_bike</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="directions_bus public transportation"
aria-label="directions_bus icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#directions_bus"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>directions_bus</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="directions_car automobile transportation"
aria-label="directions_car icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#directions_car"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>directions_car</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="directions_walk "
aria-label="directions_walk icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#directions_walk"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>directions_walk</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="do_not_disturb none disallowed cross-out no block"
aria-label="do_not_disturb icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#do_not_disturb"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>do_not_disturb</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="do_not_touch no touch"
aria-label="do_not_touch icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#do_not_touch"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>do_not_touch</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="drag_handle dragger"
aria-label="drag_handle icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#drag_handle"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>drag_handle</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="eco leaf"
aria-label="eco icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#eco"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>eco</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="edit pen write pencil"
aria-label="edit icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#edit"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>edit</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="electrical_services electricity power"
aria-label="electrical_services icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#electrical_services"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>electrical_services</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="emoji_events trophy"
aria-label="emoji_events icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>emoji_events</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="error exclamation"
aria-label="error icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#error"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>error</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="error_outline exclamation"
aria-label="error_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#error_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>error_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="event calendar"
aria-label="event icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#event"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>event</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="expand_less chevron arrow up"
aria-label="expand_less icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#expand_less"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>expand_less</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="expand_more chevron arrow down"
aria-label="expand_more icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#expand_more"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>expand_more</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="facebook social media"
aria-label="facebook icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#facebook"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>facebook</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="fast_forward arrow direction right"
aria-label="fast_forward icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#fast_forward"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>fast_forward</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="fast_rewind arrow direction left"
aria-label="fast_rewind icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#fast_rewind"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>fast_rewind</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="favorite heart"
aria-label="favorite icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#favorite"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>favorite</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="favorite_border heart"
aria-label="favorite_border icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#favorite_border"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>favorite_border</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="fax "
aria-label="fax icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#fax"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>fax</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="file_download arrow save"
aria-label="file_download icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#file_download"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>file_download</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="file_present paperclip"
aria-label="file_present icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#file_present"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>file_present</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="file_upload post arrow"
aria-label="file_upload icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#file_upload"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>file_upload</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="filter_alt "
aria-label="filter_alt icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#filter_alt"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>filter_alt</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="filter_list "
aria-label="filter_list icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#filter_list"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>filter_list</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="fingerprint biometric"
aria-label="fingerprint icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#fingerprint"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>fingerprint</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="first_page arrow"
aria-label="first_page icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#first_page"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>first_page</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="flag important"
aria-label="flag icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#flag"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>flag</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="flickr social media"
aria-label="flickr icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#flickr"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>flickr</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="flight airplane jet"
aria-label="flight icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#flight"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>flight</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="flooding water weather flood"
aria-label="flooding icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#flooding"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>flooding</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="folder "
aria-label="folder icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#folder"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>folder</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="folder_open "
aria-label="folder_open icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#folder_open"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>folder_open</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="format_quote blockquote quotation"
aria-label="format_quote icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#format_quote"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>format_quote</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="format_size "
aria-label="format_size icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#format_size"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>format_size</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="forum chat conversation"
aria-label="forum icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#forum"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>forum</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="github social media"
aria-label="github icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>github</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="grid_view "
aria-label="grid_view icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#grid_view"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>grid_view</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="group_add users"
aria-label="group_add icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#group_add"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>group_add</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="groups users"
aria-label="groups icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#groups"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>groups</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="hearing accessibility"
aria-label="hearing icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#hearing"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>hearing</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="help question mark"
aria-label="help icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#help"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>help</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="help_outline question mark"
aria-label="help_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#help_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>help_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="highlight_off x close"
aria-label="highlight_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#highlight_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>highlight_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="history clock"
aria-label="history icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#history"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>history</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="home house"
aria-label="home icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#home"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>home</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="hospital emergency doctor help"
aria-label="hospital icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#hospital"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>hospital</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="hotel motel lodging"
aria-label="hotel icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#hotel"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>hotel</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="hourglass_empty "
aria-label="hourglass_empty icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#hourglass_empty"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>hourglass_empty</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="hurricane weather storm"
aria-label="hurricane icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#hurricane"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>hurricane</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="identification id card document"
aria-label="identification icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#identification"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>identification</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="image photo picture"
aria-label="image icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#image"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>image</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="info information status"
aria-label="info icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#info"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>info</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="info_outline information status"
aria-label="info_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#info_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>info_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="insights "
aria-label="insights icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#insights"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>insights</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="instagram social media"
aria-label="instagram icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#instagram"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>instagram</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="keyboard "
aria-label="keyboard icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#keyboard"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>keyboard</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="label "
aria-label="label icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#label"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>label</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="language translate localize world globe"
aria-label="language icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#language"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>language</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="last_page arrow left"
aria-label="last_page icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#last_page"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>last_page</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="launch external link new window"
aria-label="launch icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#launch"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>launch</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="lightbulb idea insight"
aria-label="lightbulb icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#lightbulb"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>lightbulb</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="lightbulb_outline idea insight"
aria-label="lightbulb_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#lightbulb_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>lightbulb_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="link hyperlink"
aria-label="link icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#link"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>link</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="link_off hyperlink"
aria-label="link_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#link_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>link_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="linkedin social media"
aria-label="linkedin icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#linkedin"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>linkedin</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="list bullet"
aria-label="list icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#list"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>list</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_cafe coffee cup"
aria-label="local_cafe icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_cafe"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_cafe</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_fire_department "
aria-label="local_fire_department icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_fire_department"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_fire_department</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_gas_station fuel"
aria-label="local_gas_station icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_gas_station"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_gas_station</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_grocery_store cart"
aria-label="local_grocery_store icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_grocery_store"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_grocery_store</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_hospital health help"
aria-label="local_hospital icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_hospital"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_hospital</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_laundry_service laundromat wash"
aria-label="local_laundry_service icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_laundry_service"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_laundry_service</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_library book"
aria-label="local_library icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_library"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_library</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_offer tag category"
aria-label="local_offer icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_offer"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_offer</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_parking "
aria-label="local_parking icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_parking"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_parking</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_pharmacy prescription medication medicine drugs"
aria-label="local_pharmacy icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_pharmacy"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_pharmacy</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_police law shield"
aria-label="local_police icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_police"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_police</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="local_taxi cab transportation"
aria-label="local_taxi icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#local_taxi"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>local_taxi</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="location_city buildings"
aria-label="location_city icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#location_city"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>location_city</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="location_on marker pin map"
aria-label="location_on icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#location_on"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>location_on</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="lock "
aria-label="lock icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#lock"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>lock</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="lock_open "
aria-label="lock_open icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#lock_open"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>lock_open</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="lock_outline "
aria-label="lock_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#lock_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>lock_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="login "
aria-label="login icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#login"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>login</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="logout "
aria-label="logout icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#logout"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>logout</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="loop repeat"
aria-label="loop icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#loop"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>loop</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="mail envelope message"
aria-label="mail icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#mail"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>mail</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="mail_outline envelope message"
aria-label="mail_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#mail_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>mail_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="map direction"
aria-label="map icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#map"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>map</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="masks "
aria-label="masks icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#masks"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>masks</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="medical_services first aid kit"
aria-label="medical_services icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#medical_services"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>medical_services</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="menu hamburger navigation"
aria-label="menu icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#menu"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>menu</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="military_tech "
aria-label="military_tech icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#military_tech"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>military_tech</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="more_horiz menu navigation"
aria-label="more_horiz icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#more_horiz"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>more_horiz</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="more_vert menu navigation"
aria-label="more_vert icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#more_vert"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>more_vert</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="my_location map geolocate"
aria-label="my_location icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#my_location"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>my_location</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="navigate_before chevron arrow left direction"
aria-label="navigate_before icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#navigate_before"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>navigate_before</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="navigate_next chevron arrow right direction"
aria-label="navigate_next icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#navigate_next"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>navigate_next</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="navigate_far_before chevron double arrow left direction"
aria-label="navigate_far_before icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#navigate_far_before"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>navigate_far_before</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="navigate_far_next chevron double arrow right direction"
aria-label="navigate_far_next icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#navigate_far_next"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>navigate_far_next</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="near_me location compass proximity"
aria-label="near_me icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#near_me"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>near_me</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="notifications bell"
aria-label="notifications icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#notifications"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>notifications</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="notifications_active bell"
aria-label="notifications_active icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#notifications_active"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>notifications_active</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="notifications_none bell"
aria-label="notifications_none icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#notifications_none"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>notifications_none</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="notifications_off bell"
aria-label="notifications_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#notifications_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>notifications_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="park tree"
aria-label="park icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#park"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>park</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="people users"
aria-label="people icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#people"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>people</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="person user"
aria-label="person icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#person"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>person</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="pets dog cat paw"
aria-label="pets icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#pets"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>pets</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="phone telephone"
aria-label="phone icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#phone"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>phone</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="photo_camera image picture"
aria-label="photo_camera icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#photo_camera"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>photo_camera</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="print printer"
aria-label="print icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#print"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>print</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="priority_high exclamation error notice"
aria-label="priority_high icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#priority_high"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>priority_high</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="public world globe earth language"
aria-label="public icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#public"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>public</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="push_pin save"
aria-label="push_pin icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#push_pin"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>push_pin</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="radio_button_unchecked circle check box"
aria-label="radio_button_unchecked icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#radio_button_unchecked"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>radio_button_unchecked</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="rain weather water storm"
aria-label="rain icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#rain"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>rain</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="reduce_capacity occupancy"
aria-label="reduce_capacity icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#reduce_capacity"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>reduce_capacity</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="remove minus collapse"
aria-label="remove icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#remove"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>remove</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="remove_circle minus delete"
aria-label="remove_circle icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#remove_circle"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>remove_circle</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="report exclamation danger stop"
aria-label="report icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#report"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>report</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="restaurant dining food"
aria-label="restaurant icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#restaurant"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>restaurant</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="rss_feed "
aria-label="rss_feed icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#rss_feed"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>rss_feed</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="safety_divider barrier"
aria-label="safety_divider icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#safety_divider"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>safety_divider</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sanitizer hand clean"
aria-label="sanitizer icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sanitizer"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sanitizer</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="severe_weather storm"
aria-label="severe_weather icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#severe_weather"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>severe_weather</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="save_alt arrow"
aria-label="save_alt icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#save_alt"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>save_alt</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="schedule clock"
aria-label="schedule icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#schedule"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>schedule</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="school education graduation"
aria-label="school icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#school"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>school</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="science "
aria-label="science icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#science"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>science</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="search magnifying glass find"
aria-label="search icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#search"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>search</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="security shield"
aria-label="security icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#security"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>security</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="send mail deliver"
aria-label="send icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#send"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>send</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sentiment_dissatisfied face review feeling customer frown"
aria-label="sentiment_dissatisfied icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sentiment_dissatisfied"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sentiment_dissatisfied</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sentiment_neutral face reate review feeling customer"
aria-label="sentiment_neutral icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sentiment_neutral"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sentiment_neutral</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sentiment_satisfied face reate review feeling customer smile"
aria-label="sentiment_satisfied icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sentiment_satisfied"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sentiment_satisfied</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sentiment_satisfied_alt face reate review feeling customer smile"
aria-label="sentiment_satisfied_alt icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sentiment_satisfied_alt"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sentiment_satisfied_alt</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sentiment_very_dissatisfied face reate review feeling customer frown"
aria-label="sentiment_very_dissatisfied icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sentiment_very_dissatisfied"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sentiment_very_dissatisfied</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="settings gear cog"
aria-label="settings icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#settings"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>settings</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="share social"
aria-label="share icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#share"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>share</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="shield "
aria-label="shield icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#shield"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>shield</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="shopping_basket cart purchase"
aria-label="shopping_basket icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#shopping_basket"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>shopping_basket</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="snow storm weather winter emergency blizzard"
aria-label="snow icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#snow"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>snow</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="soap sanitize safety hand wash"
aria-label="soap icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#soap"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>soap</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="social_distance "
aria-label="social_distance icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#social_distance"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>social_distance</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="sort_arrow direction up down"
aria-label="sort_arrow icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#sort_arrow"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>sort_arrow</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="spellcheck edit"
aria-label="spellcheck icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#spellcheck"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>spellcheck</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="star review rate"
aria-label="star icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#star"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>star</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="star_half review rate"
aria-label="star_half icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#star_half"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>star_half</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="star_outline review rate"
aria-label="star_outline icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#star_outline"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>star_outline</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="store business"
aria-label="store icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#store"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>store</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="support help life preserver"
aria-label="support icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#support"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>support</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="support_agent "
aria-label="support_agent icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#support_agent"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>support_agent</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="text_fields edit"
aria-label="text_fields icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#text_fields"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>text_fields</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="thumb_down_alt rate review"
aria-label="thumb_down_alt icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#thumb_down_alt"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>thumb_down_alt</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="thumb_up_alt rate review"
aria-label="thumb_up_alt icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#thumb_up_alt"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>thumb_up_alt</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="timer countdown"
aria-label="timer icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#timer"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>timer</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="toggle_off switch"
aria-label="toggle_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#toggle_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>toggle_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="toggle_on switch"
aria-label="toggle_on icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#toggle_on"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>toggle_on</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="topic folder"
aria-label="topic icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#topic"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>topic</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="tornado storm weather wind emergency"
aria-label="tornado icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#tornado"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>tornado</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="translate "
aria-label="translate icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#translate"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>translate</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="trending_down arrow"
aria-label="trending_down icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#trending_down"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>trending_down</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="trending_up arrow"
aria-label="trending_up icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#trending_up"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>trending_up</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="twitter social media"
aria-label="twitter icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>twitter</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="undo edit arrow"
aria-label="undo icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#undo"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>undo</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="unfold_less arrows collapse"
aria-label="unfold_less icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#unfold_less"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>unfold_less</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="unfold_more arrows expand"
aria-label="unfold_more icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#unfold_more"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>unfold_more</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="update clock"
aria-label="update icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#update"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>update</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="upload_file "
aria-label="upload_file icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#upload_file"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>upload_file</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="verified check"
aria-label="verified icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#verified"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>verified</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="verified_user check"
aria-label="verified_user icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#verified_user"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>verified_user</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="visibility eye remove_red-eye"
aria-label="visibility icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#visibility"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>visibility</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="visibility_off eye hidden masked"
aria-label="visibility_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#visibility_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>visibility_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="volume_off speaker"
aria-label="volume_off icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#volume_off"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>volume_off</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="warning exclamation triangle"
aria-label="warning icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#warning"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>warning</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="wash sanitize hand"
aria-label="wash icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#wash"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>wash</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="wifi signal"
aria-label="wifi icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#wifi"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>wifi</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="work briefcase"
aria-label="work icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#work"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>work</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="youtube social media"
aria-label="youtube icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#youtube"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>youtube</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="zoom_in expand enlarge magnifying glass"
aria-label="zoom_in icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#zoom_in"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>zoom_in</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="zoom_out_map expand fullscreen"
aria-label="zoom_out_map icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#zoom_out_map"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>zoom_out_map</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
<div
role="region"
aria-atomic="true"
class="
font-sans-xl
position-relative
icon-example
border-1px border-base-lighter
hover:text-white hover:bg-primary-vivid hover:border-primary-darker
"
data-meta="zoom_out shrink magnifying glass"
aria-label="zoom_out icon."
>
<button
type="button"
onclick="copyHTML(this)"
class="
bg-transparent
cursor-pointer
text-no-underline text-black
display-flex
width-card
height-card
flex-align-center flex-align-center
border-0
flex-column flex-justify-center
padding-2
hover:text-white
"
aria-label="Copy icon to clipboard"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#zoom_out"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true"
>zoom_out</span
>
</button>
<span
aria-live="assertive"
style="pointer-events: none"
class="
message-holder
bottom-1
position-absolute
font-sans-3xs
text-bold
display-block
text-center
left-0
width-full
"
></span>
</div>
</div>
<script>
function filter(e) {
search = e.value.toLowerCase();
document.querySelectorAll(".icon-example").forEach(function (row) {
text = row.getAttribute("data-meta").toLowerCase();
if (text.match(search)) {
row.classList.remove("display-none");
} else {
row.classList.add("display-none");
}
});
iconCount = document.querySelectorAll(
".icon-example:not(.display-none)"
).length;
var word = iconCount === 1 ? "icon" : "icons";
document.getElementById("icon-count").innerHTML = `${iconCount} ${word}.`;
}
function copyHTML(el) {
code = el.querySelector("svg").outerHTML;
messagePlaceholder = el.nextElementSibling;
oldCopyNotice = document.getElementById("icon-copy-notice");
if (oldCopyNotice) {
oldCopyNotice.remove();
}
message = document.createElement("span");
message.setAttribute("id", "icon-copy-notice");
message.innerHTML = "Copied to clipboard!";
/* Copy the text inside the text field */
navigator.clipboard.writeText(code);
messagePlaceholder.append(message);
}
</script>