<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" type="text" onkeyup="filter(this)" />
<p class="text-base" aria-live="polite"><span id="icon-count">240 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="high-visibility-crosswalk high visibility crosswalk" aria-label="high-visibility-crosswalk 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 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="../../../dist/img/sprite.svg#high-visibility-crosswalk"></use>
</svg>
<span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">high-visibility-crosswalk</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" aria-label="high-visibility-crosswalk"></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="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 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="../../../dist/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" aria-label="accessibility_new"></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 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="../../../dist/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" aria-label="accessible_forward"></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 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="../../../dist/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" aria-label="account_balance"></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 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="../../../dist/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" aria-label="account_box"></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 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="../../../dist/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" aria-label="account_circle"></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 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="../../../dist/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" aria-label="add"></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 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="../../../dist/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" aria-label="add_circle"></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 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="../../../dist/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" aria-label="add_circle_outline"></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 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="../../../dist/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" aria-label="alarm"></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 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="../../../dist/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" aria-label="alternate_email"></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 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="../../../dist/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" aria-label="announcement"></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 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="../../../dist/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" aria-label="arrow_back"></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 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="../../../dist/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" aria-label="arrow_downward"></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 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="../../../dist/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" aria-label="arrow_drop_down"></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 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="../../../dist/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" aria-label="arrow_drop_up"></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 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="../../../dist/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" aria-label="arrow_forward"></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 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="../../../dist/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" aria-label="arrow_upward"></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 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="../../../dist/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" aria-label="api"></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 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="../../../dist/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" aria-label="assessment"></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 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="../../../dist/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" aria-label="attach_file"></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 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="../../../dist/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" aria-label="attach_money"></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 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="../../../dist/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" aria-label="autorenew"></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 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="../../../dist/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" aria-label="backpack"></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 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="../../../dist/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" aria-label="bathtub"></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 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="../../../dist/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" aria-label="bedding"></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 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="../../../dist/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" aria-label="bookmark"></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 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="../../../dist/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" aria-label="bug_report"></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 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="../../../dist/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" aria-label="build"></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 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="../../../dist/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" aria-label="calendar_today"></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 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="../../../dist/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" aria-label="campaign"></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 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="../../../dist/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" aria-label="camping"></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 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="../../../dist/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" aria-label="cancel"></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 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="../../../dist/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" aria-label="chat"></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 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="../../../dist/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" aria-label="check"></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 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="../../../dist/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" aria-label="check_box_outline_blank"></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 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="../../../dist/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" aria-label="check_circle"></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 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="../../../dist/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" aria-label="check_circle_outline"></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 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="../../../dist/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" aria-label="checkroom"></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 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="../../../dist/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" aria-label="clean_hands"></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 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="../../../dist/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" aria-label="clothes"></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 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="../../../dist/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" aria-label="close"></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 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="../../../dist/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" aria-label="closed_caption"></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 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="../../../dist/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" aria-label="cloud"></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 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="../../../dist/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" aria-label="code"></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 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="../../../dist/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" aria-label="comment"></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 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="../../../dist/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" aria-label="connect_without_contact"></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 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="../../../dist/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" aria-label="construction"></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 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="../../../dist/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" aria-label="construction_worker"></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 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="../../../dist/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" aria-label="contact_page"></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 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="../../../dist/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" aria-label="content_copy"></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 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="../../../dist/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" aria-label="coronavirus"></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 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="../../../dist/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" aria-label="credit_card"></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 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="../../../dist/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" aria-label="deck"></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 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="../../../dist/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" aria-label="delete"></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 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="../../../dist/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" aria-label="device_thermostat"></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 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="../../../dist/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" aria-label="directions"></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 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="../../../dist/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" aria-label="directions_bike"></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 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="../../../dist/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" aria-label="directions_bus"></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 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="../../../dist/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" aria-label="directions_car"></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 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="../../../dist/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" aria-label="directions_walk"></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 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="../../../dist/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" aria-label="do_not_disturb"></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 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="../../../dist/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" aria-label="do_not_touch"></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 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="../../../dist/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" aria-label="drag_handle"></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 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="../../../dist/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" aria-label="eco"></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 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="../../../dist/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" aria-label="edit"></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 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="../../../dist/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" aria-label="electrical_services"></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 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="../../../dist/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" aria-label="emoji_events"></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 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="../../../dist/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" aria-label="error"></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 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="../../../dist/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" aria-label="error_outline"></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 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="../../../dist/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" aria-label="event"></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 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="../../../dist/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" aria-label="expand_less"></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 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="../../../dist/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" aria-label="expand_more"></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 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="../../../dist/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" aria-label="facebook"></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 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="../../../dist/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" aria-label="fast_forward"></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 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="../../../dist/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" aria-label="fast_rewind"></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 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="../../../dist/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" aria-label="favorite"></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 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="../../../dist/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" aria-label="favorite_border"></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 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="../../../dist/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" aria-label="file_download"></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 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="../../../dist/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" aria-label="file_present"></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 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="../../../dist/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" aria-label="file_upload"></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 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="../../../dist/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" aria-label="filter_alt"></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 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="../../../dist/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" aria-label="filter_list"></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 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="../../../dist/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" aria-label="fingerprint"></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 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="../../../dist/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" aria-label="first_page"></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 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="../../../dist/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" aria-label="flag"></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 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="../../../dist/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" aria-label="flickr"></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 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="../../../dist/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" aria-label="flight"></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 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="../../../dist/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" aria-label="flooding"></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 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="../../../dist/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" aria-label="folder"></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 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="../../../dist/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" aria-label="folder_open"></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 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="../../../dist/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" aria-label="format_quote"></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 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="../../../dist/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" aria-label="format_size"></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 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="../../../dist/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" aria-label="forum"></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 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="../../../dist/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" aria-label="github"></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 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="../../../dist/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" aria-label="grid_view"></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 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="../../../dist/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" aria-label="group_add"></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 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="../../../dist/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" aria-label="groups"></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 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="../../../dist/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" aria-label="hearing"></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 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="../../../dist/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" aria-label="help"></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 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="../../../dist/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" aria-label="help_outline"></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 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="../../../dist/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" aria-label="highlight_off"></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 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="../../../dist/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" aria-label="history"></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 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="../../../dist/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" aria-label="home"></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 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="../../../dist/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" aria-label="hospital"></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 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="../../../dist/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" aria-label="hotel"></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 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="../../../dist/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" aria-label="hourglass_empty"></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 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="../../../dist/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" aria-label="hurricane"></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 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="../../../dist/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" aria-label="identification"></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 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="../../../dist/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" aria-label="image"></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 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="../../../dist/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" aria-label="info"></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 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="../../../dist/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" aria-label="info_outline"></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 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="../../../dist/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" aria-label="insights"></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 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="../../../dist/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" aria-label="instagram"></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 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="../../../dist/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" aria-label="keyboard"></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 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="../../../dist/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" aria-label="label"></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 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="../../../dist/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" aria-label="language"></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 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="../../../dist/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" aria-label="last_page"></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 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="../../../dist/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" aria-label="launch"></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 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="../../../dist/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" aria-label="lightbulb"></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 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="../../../dist/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" aria-label="lightbulb_outline"></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 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="../../../dist/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" aria-label="link"></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 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="../../../dist/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" aria-label="link_off"></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 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="../../../dist/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" aria-label="list"></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 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="../../../dist/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" aria-label="local_cafe"></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 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="../../../dist/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" aria-label="local_fire_department"></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 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="../../../dist/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" aria-label="local_gas_station"></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 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="../../../dist/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" aria-label="local_grocery_store"></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 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="../../../dist/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" aria-label="local_hospital"></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 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="../../../dist/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" aria-label="local_laundry_service"></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 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="../../../dist/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" aria-label="local_library"></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 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="../../../dist/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" aria-label="local_offer"></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 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="../../../dist/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" aria-label="local_parking"></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 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="../../../dist/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" aria-label="local_pharmacy"></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 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="../../../dist/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" aria-label="local_police"></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 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="../../../dist/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" aria-label="local_taxi"></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 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="../../../dist/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" aria-label="location_city"></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 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="../../../dist/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" aria-label="location_on"></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 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="../../../dist/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" aria-label="lock"></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 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="../../../dist/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" aria-label="lock_open"></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 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="../../../dist/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" aria-label="lock_outline"></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 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="../../../dist/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" aria-label="login"></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 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="../../../dist/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" aria-label="logout"></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 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="../../../dist/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" aria-label="loop"></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 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="../../../dist/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" aria-label="mail"></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 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="../../../dist/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" aria-label="mail_outline"></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 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="../../../dist/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" aria-label="map"></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 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="../../../dist/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" aria-label="masks"></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 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="../../../dist/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" aria-label="medical_services"></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 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="../../../dist/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" aria-label="menu"></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 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="../../../dist/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" aria-label="military_tech"></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 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="../../../dist/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" aria-label="more_horiz"></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 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="../../../dist/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" aria-label="more_vert"></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 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="../../../dist/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" aria-label="my_location"></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 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="../../../dist/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" aria-label="navigate_before"></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 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="../../../dist/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" aria-label="navigate_next"></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 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="../../../dist/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" aria-label="navigate_far_before"></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 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="../../../dist/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" aria-label="navigate_far_next"></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 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="../../../dist/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" aria-label="near_me"></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 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="../../../dist/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" aria-label="notifications"></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 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="../../../dist/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" aria-label="notifications_active"></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 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="../../../dist/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" aria-label="notifications_none"></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 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="../../../dist/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" aria-label="notifications_off"></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 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="../../../dist/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" aria-label="park"></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 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="../../../dist/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" aria-label="people"></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 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="../../../dist/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" aria-label="person"></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 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="../../../dist/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" aria-label="pets"></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 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="../../../dist/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" aria-label="phone"></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 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="../../../dist/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" aria-label="photo_camera"></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 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="../../../dist/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" aria-label="print"></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 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="../../../dist/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" aria-label="priority_high"></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 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="../../../dist/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" aria-label="public"></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 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="../../../dist/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" aria-label="push_pin"></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 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="../../../dist/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" aria-label="radio_button_unchecked"></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 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="../../../dist/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" aria-label="rain"></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 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="../../../dist/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" aria-label="reduce_capacity"></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 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="../../../dist/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" aria-label="remove"></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 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="../../../dist/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" aria-label="report"></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 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="../../../dist/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" aria-label="restaurant"></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 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="../../../dist/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" aria-label="rss_feed"></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 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="../../../dist/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" aria-label="safety_divider"></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 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="../../../dist/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" aria-label="sanitizer"></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 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="../../../dist/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" aria-label="save_alt"></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 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="../../../dist/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" aria-label="severe_weather"></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 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="../../../dist/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" aria-label="schedule"></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 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="../../../dist/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" aria-label="school"></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 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="../../../dist/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" aria-label="science"></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 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="../../../dist/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" aria-label="search"></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 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="../../../dist/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" aria-label="security"></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 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="../../../dist/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" aria-label="send"></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 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="../../../dist/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" aria-label="sentiment_dissatisfied"></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 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="../../../dist/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" aria-label="sentiment_neutral"></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 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="../../../dist/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" aria-label="sentiment_satisfied"></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 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="../../../dist/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" aria-label="sentiment_satisfied_alt"></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 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="../../../dist/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" aria-label="sentiment_very_dissatisfied"></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 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="../../../dist/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" aria-label="settings"></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 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="../../../dist/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" aria-label="share"></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 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="../../../dist/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" aria-label="shield"></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 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="../../../dist/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" aria-label="shopping_basket"></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 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="../../../dist/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" aria-label="snow"></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 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="../../../dist/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" aria-label="soap"></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 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="../../../dist/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" aria-label="social_distance"></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 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="../../../dist/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" aria-label="sort_arrow"></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 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="../../../dist/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" aria-label="spellcheck"></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 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="../../../dist/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" aria-label="star"></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 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="../../../dist/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" aria-label="star_half"></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 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="../../../dist/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" aria-label="star_outline"></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 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="../../../dist/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" aria-label="store"></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 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="../../../dist/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" aria-label="support"></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 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="../../../dist/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" aria-label="support_agent"></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 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="../../../dist/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" aria-label="text_fields"></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 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="../../../dist/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" aria-label="thumb_down_alt"></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 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="../../../dist/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" aria-label="thumb_up_alt"></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 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="../../../dist/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" aria-label="timer"></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 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="../../../dist/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" aria-label="toggle_off"></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 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="../../../dist/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" aria-label="toggle_on"></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 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="../../../dist/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" aria-label="topic"></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 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="../../../dist/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" aria-label="tornado"></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 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="../../../dist/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" aria-label="translate"></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 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="../../../dist/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" aria-label="trending_down"></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 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="../../../dist/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" aria-label="trending_up"></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 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="../../../dist/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" aria-label="twitter"></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 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="../../../dist/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" aria-label="undo"></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 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="../../../dist/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" aria-label="unfold_less"></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 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="../../../dist/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" aria-label="unfold_more"></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 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="../../../dist/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" aria-label="update"></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 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="../../../dist/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" aria-label="upload_file"></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 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="../../../dist/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" aria-label="verified"></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 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="../../../dist/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" aria-label="verified_user"></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 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="../../../dist/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" aria-label="visibility"></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 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="../../../dist/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" aria-label="visibility_off"></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 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="../../../dist/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" aria-label="volume_off"></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 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="../../../dist/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" aria-label="warning"></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 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="../../../dist/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" aria-label="wash"></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 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="../../../dist/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" aria-label="wifi"></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 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="../../../dist/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" aria-label="work"></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 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="../../../dist/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" aria-label="youtube"></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 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="../../../dist/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" aria-label="zoom_in"></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 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="../../../dist/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" aria-label="zoom_out_map"></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 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="../../../dist/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" aria-label="zoom_out"></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.setAttribute("aria-live", "assertive");
message.innerHTML = "Copied to clipboard!";
/* Copy the text inside the text field */
navigator.clipboard.writeText(code);
messagePlaceholder.append(message);
}
</script>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
icons:
sizes:
- units: '3'
pixels: 24px
- units: '4'
pixels: 32px
- units: '5'
pixels: 40px
- units: '6'
pixels: 48px
- units: '7'
pixels: 56px
- units: '8'
pixels: 64px
- units: '9'
pixels: 72px
items:
- name: high-visibility-crosswalk
meta: high visibility crosswalk
- name: accessibility_new
meta: accessible
- name: accessible_forward
meta: accessible wheelchair
- name: account_balance
meta: finance institution
- name: account_box
meta: user identity identification
- name: account_circle
meta: user
- name: add
meta: plus open
- name: add_circle
meta: plus open
- name: add_circle_outline
meta: plus open
- name: alarm
meta: clock time
- name: alternate_email
meta: at-sign
- name: announcement
meta: exclamation
- name: arrow_back
meta: navigation direction
- name: arrow_downward
meta: navigation direction
- name: arrow_drop_down
meta: carrot caret
- name: arrow_drop_up
meta: carrot caret
- name: arrow_forward
meta: navigation direction
- name: arrow_upward
meta: navigation direction
- name: api
meta: application programming interface
- name: assessment
meta: metrics bar chart test results
- name: attach_file
meta: paperclip
- name: attach_money
meta: dollar sign cash financial
- name: autorenew
meta: refresh
- name: backpack
meta: bag emergency kit
- name: bathtub
meta: bathe shower hygiene
- name: bedding
meta: blanket
- name: bookmark
meta: ''
- name: bug_report
meta: ''
- name: build
meta: wrench
- name: calendar_today
meta: date
- name: campaign
meta: bullhorn
- name: camping
meta: tent shelter
- name: cancel
meta: x close
- name: chat
meta: comment
- name: check
meta: done complete
- name: check_box_outline_blank
meta: square
- name: check_circle
meta: done complete
- name: check_circle_outline
meta: done complete
- name: checkroom
meta: coathanger
- name: clean_hands
meta: sanitize wash soap
- name: clothes
meta: shirt sweater clothing
- name: close
meta: x
- name: closed_caption
meta: cc video accessiblity
- name: cloud
meta: ''
- name: code
meta: ''
- name: comment
meta: chat
- name: connect_without_contact
meta: ''
- name: construction
meta: tool
- name: construction_worker
meta: maintenance
- name: contact_page
meta: ''
- name: content_copy
meta: ''
- name: coronavirus
meta: ''
- name: credit_card
meta: payment
- name: deck
meta: patio dine dining bar
- name: delete
meta: trash
- name: device_thermostat
meta: ''
- name: directions
meta: arrow
- name: directions_bike
meta: bicycle transportation
- name: directions_bus
meta: public transportation
- name: directions_car
meta: automobile transportation
- name: directions_walk
meta: ''
- name: do_not_disturb
meta: none disallowed cross-out no block
- name: do_not_touch
meta: no touch
- name: drag_handle
meta: dragger
- name: eco
meta: leaf
- name: edit
meta: pen write pencil
- name: electrical_services
meta: electricity power
- name: emoji_events
meta: trophy
- name: error
meta: exclamation
- name: error_outline
meta: exclamation
- name: event
meta: calendar
- name: expand_less
meta: chevron arrow up
- name: expand_more
meta: chevron arrow down
- name: facebook
meta: social media
- name: fast_forward
meta: arrow direction right
- name: fast_rewind
meta: arrow direction left
- name: favorite
meta: heart
- name: favorite_border
meta: heart
- name: file_download
meta: arrow save
- name: file_present
meta: paperclip
- name: file_upload
meta: post arrow
- name: filter_alt
meta: ''
- name: filter_list
meta: ''
- name: fingerprint
meta: biometric
- name: first_page
meta: arrow
- name: flag
meta: important
- name: flickr
meta: social media
- name: flight
meta: airplane jet
- name: flooding
meta: water weather flood
- name: folder
meta: ''
- name: folder_open
meta: ''
- name: format_quote
meta: blockquote quotation
- name: format_size
meta: ''
- name: forum
meta: chat conversation
- name: github
meta: social media
- name: grid_view
meta: ''
- name: group_add
meta: users
- name: groups
meta: users
- name: hearing
meta: accessibility
- name: help
meta: question mark
- name: help_outline
meta: question mark
- name: highlight_off
meta: x close
- name: history
meta: clock
- name: home
meta: house
- name: hospital
meta: emergency doctor help
- name: hotel
meta: motel lodging
- name: hourglass_empty
meta: ''
- name: hurricane
meta: weather storm
- name: identification
meta: id card document
- name: image
meta: photo picture
- name: info
meta: information status
- name: info_outline
meta: information status
- name: insights
meta: ''
- name: instagram
meta: social media
- name: keyboard
meta: ''
- name: label
meta: ''
- name: language
meta: translate localize world globe
- name: last_page
meta: arrow left
- name: launch
meta: external link new window
- name: lightbulb
meta: idea insight
- name: lightbulb_outline
meta: idea insight
- name: link
meta: hyperlink
- name: link_off
meta: hyperlink
- name: list
meta: bullet
- name: local_cafe
meta: coffee cup
- name: local_fire_department
meta: ''
- name: local_gas_station
meta: fuel
- name: local_grocery_store
meta: cart
- name: local_hospital
meta: health help
- name: local_laundry_service
meta: laundromat wash
- name: local_library
meta: book
- name: local_offer
meta: tag category
- name: local_parking
meta: ''
- name: local_pharmacy
meta: prescription medication medicine drugs
- name: local_police
meta: law shield
- name: local_taxi
meta: cab transportation
- name: location_city
meta: buildings
- name: location_on
meta: marker pin map
- name: lock
meta: ''
- name: lock_open
meta: ''
- name: lock_outline
meta: ''
- name: login
meta: ''
- name: logout
meta: ''
- name: loop
meta: repeat
- name: mail
meta: envelope message
- name: mail_outline
meta: envelope message
- name: map
meta: direction
- name: masks
meta: ''
- name: medical_services
meta: first aid kit
- name: menu
meta: hamburger navigation
- name: military_tech
meta: ''
- name: more_horiz
meta: menu navigation
- name: more_vert
meta: menu navigation
- name: my_location
meta: map geolocate
- name: navigate_before
meta: chevron arrow left direction
- name: navigate_next
meta: chevron arrow right direction
- name: navigate_far_before
meta: chevron double arrow left direction
- name: navigate_far_next
meta: chevron double arrow right direction
- name: near_me
meta: location compass proximity
- name: notifications
meta: bell
- name: notifications_active
meta: bell
- name: notifications_none
meta: bell
- name: notifications_off
meta: bell
- name: park
meta: tree
- name: people
meta: users
- name: person
meta: user
- name: pets
meta: dog cat paw
- name: phone
meta: telephone
- name: photo_camera
meta: image picture
- name: print
meta: printer
- name: priority_high
meta: exclamation error notice
- name: public
meta: world globe earth language
- name: push_pin
meta: save
- name: radio_button_unchecked
meta: circle check box
- name: rain
meta: weather water storm
- name: reduce_capacity
meta: occupancy
- name: remove
meta: minus collapse
- name: report
meta: exclamation danger stop
- name: restaurant
meta: dining food
- name: rss_feed
meta: ''
- name: safety_divider
meta: barrier
- name: sanitizer
meta: hand clean
- name: save_alt
meta: arrow
- name: severe_weather
meta: storm
- name: schedule
meta: clock
- name: school
meta: education graduation
- name: science
meta: ''
- name: search
meta: magnifying glass find
- name: security
meta: shield
- name: send
meta: mail deliver
- name: sentiment_dissatisfied
meta: face review feeling customer frown
- name: sentiment_neutral
meta: face reate review feeling customer
- name: sentiment_satisfied
meta: face reate review feeling customer smile
- name: sentiment_satisfied_alt
meta: face reate review feeling customer smile
- name: sentiment_very_dissatisfied
meta: face reate review feeling customer frown
- name: settings
meta: gear cog
- name: share
meta: social
- name: shield
meta: ''
- name: shopping_basket
meta: cart purchase
- name: snow
meta: storm weather winter emergency blizzard
- name: soap
meta: sanitize safety hand wash
- name: social_distance
meta: ''
- name: sort_arrow
meta: direction up down
- name: spellcheck
meta: edit
- name: star
meta: review rate
- name: star_half
meta: review rate
- name: star_outline
meta: review rate
- name: store
meta: business
- name: support
meta: help life preserver
- name: support_agent
meta: ''
- name: text_fields
meta: edit
- name: thumb_down_alt
meta: rate review
- name: thumb_up_alt
meta: rate review
- name: timer
meta: countdown
- name: toggle_off
meta: switch
- name: toggle_on
meta: switch
- name: topic
meta: folder
- name: tornado
meta: storm weather wind emergency
- name: translate
meta: ''
- name: trending_down
meta: arrow
- name: trending_up
meta: arrow
- name: twitter
meta: social media
- name: undo
meta: edit arrow
- name: unfold_less
meta: arrows collapse
- name: unfold_more
meta: arrows expand
- name: update
meta: clock
- name: upload_file
meta: ''
- name: verified
meta: check
- name: verified_user
meta: check
- name: visibility
meta: eye remove_red-eye
- name: visibility_off
meta: eye hidden masked
- name: volume_off
meta: speaker
- name: warning
meta: exclamation triangle
- name: wash
meta: sanitize hand
- name: wifi
meta: signal
- name: work
meta: briefcase
- name: youtube
meta: social media
- name: zoom_in
meta: expand enlarge magnifying glass
- name: zoom_out_map
meta: expand fullscreen
- name: zoom_out
meta: shrink magnifying glass