Components

Icons

Icons help communicate meaning, actions, status, or feedback.

Icons are a simple, easily graspable way to add visual emphasis or interest, signal an action, or indicate a feedback state — all while reducing a user’s cognitive load.

Using a consistent set of icons helps establish a familiar look and feel across a site or service, while using individual icons consistently establishes a reliable relationship between the image and a specific concept or action. For example, don’t use an envelope icon to indicate email on one page and mailing address on another. Users should be able to trust that a certain icon always means the same thing, no matter where it’s used on your site. It’s important that icons always serve a single functional purpose throughout a site or service.

View all icons included in the USWDS default set.

An icon relative to font size

An icon relative to font size

Fixed sizes
Modifier Icon Units Pixels
.usa-icon--size-3 3 24px
.usa-icon--size-4 4 32px
.usa-icon--size-5 5 40px
.usa-icon--size-6 6 48px
.usa-icon--size-7 7 56px
.usa-icon--size-8 8 64px
.usa-icon--size-9 9 72px
<div>
  <p class="font-sans-2xl line-height-body-1 text-bold margin-y-0">
  An icon relative to font size
    <svg class="usa-icon bottom-neg-05" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="/assets/img/sprite.svg#arrow_forward"></use>
    </svg>
  </p>

  <p class="">
  An icon relative to font size
    <svg class="usa-icon bottom-neg-2px" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="/assets/img/sprite.svg#arrow_forward"></use>
    </svg>
  </p>

  <table class="usa-table usa-table--borderless width-full">
    <caption>Fixed sizes</caption>
    <thead>
      <th>Modifier</th>
      <th>Icon</th>
      <th>Units</th>
      <th>Pixels</th>
    </thead>
    <tbody>
  
    <tr>
      <th><code>.usa-icon--size-3</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>3</code></td>
      <td><code>24px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-4</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-4" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>4</code></td>
      <td><code>32px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-5</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>5</code></td>
      <td><code>40px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-6</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-6" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>6</code></td>
      <td><code>48px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-7</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-7" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>7</code></td>
      <td><code>56px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-8</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-8" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>8</code></td>
      <td><code>64px</code></td>
    </tr>
  
    <tr>
      <th><code>.usa-icon--size-9</code></th>
      <td>
        <svg class="usa-icon usa-icon--size-9" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
        </svg>
      </td>
      <td><code>9</code></td>
      <td><code>72px</code></td>
    </tr>
  
    </tbody>
  </table>
</div>

When to use icons

  • To draw attention to actions. Icons are helpful when combined with text to inform users about performing an action. The icon should directly relate to the text it accompanies.
  • To help readers find key information. Use icons as scannable, easy-to-understand visual indicators for key information like a phone number or email address.
  • To enhance an actionable target. Icons make great touch or click targets. Use an icon for common actions like opening a menu or sharing an article.

When to consider something else

  • Meaning is ambiguous. Use icons in a common or conventional way only. If the meaning of an icon is ambiguous by itself, it needs accompanying text.
  • Compensating for page structure. Icons don’t fix unclear page hierarchy or confusing content organization. Don’t rely on an icon to help draw attention to something important that’s hard to find. Fix the content’s placement first.
  • You need illustrative artwork. Icons have a specific, functional meaning. Avoid using icons outside their intended usage for illustrative purposes (like using the “visibility” eye icon to illustrate an actual eye). If you want to use a graphic to enhance your content or explain a more in-depth concept, consider using an illustration instead of an icon.

Usability guidance

  • Combine with text. Users will not always understand the meaning of icons alone. Use icons combined with text to improve usability.
  • Be consistent with icon meaning. Icons that are used a number of times throughout an application or site must have a consistent meaning and text description throughout. For example, if an icon of a blank piece of paper means “new document” on most screens, the same icon shouldn’t be used elsewhere to mean “reformat document.” Consistency aids users with cognitive disabilities and creates a better user experience for all users.
  • When interactive, combine with other components. If the icon is part of an interactive element, it should be implemented within another functional component, like as part of a button or list.

Accessibility

  • Hide decorative icons from screen readers. Use the aria-hidden="true" and role=”img” if the icon is redundant and used solely as visual progressive enhancement.
    <a href="https://twitter.com/uswds">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_forward"></use>
      </svg>
      USWDS' Twitter account
    </a>
    
  • Provide descriptive text if a standalone icon has semantic meaning. If you need to expose an icon to screen readers, remove the aria-hidden="true" attribute and add a aria-labelledby attribute with a value that matches the id of a <title> element added inside the svg.
    <a href="https://twitter.com/uswds">
      <svg aria-labelledby="twitter-title" role="img">
        <title id="twitter-title">USWDS' Twitter account</title>
        <use xlink:href="/path/to/sprite.svg#twitter"></use>
      </svg>
    </a>
    
  • Place icons inside links. If icons accompany a text link, place the icon inside the link to prevent the screen reader from announcing the link twice.

Implementation

  • Don’t alter icons. You shouldn’t customize, combine, or change the icons (other than updating the color) due to their license.
  • Icons are available for use in src/img/usa-icons. Any icons not included in the curated set are located in src/img/usa-icons-unused. You can move them into your project and rebuild the SVG sprite using uswds-gulp.
  • Using color in icons. Icons use currentColor, so the color of the icon will be the text color of its parent element. Change colors with the color utility.
  • Relative to font size. By default, icons will scale with font size. If you want to specify an icon size, use one of the component’s size variants.
  • Icon names are identifiers. To use an individual, simply change the identifier after the pound sign in the sprite path to the icon name. For example, to use the accessibility_new icon, the path will be <use xlink:href="/path/to/sprite.svg#accessibility_new"> or to use the info icon, the path will be <use xlink:href="/path/to/sprite.svg#info">.

Icon variants

Variant Description
.usa-icon--size-3 24px x 24px icon
.usa-icon--size-4 32px x 32px icon
.usa-icon--size-5 40px x 40px icon
.usa-icon--size-6 48px x 48px icon
.usa-icon--size-7 56px x 56px icon
.usa-icon--size-8 64px x 64px icon
.usa-icon--size-9 72px x 72px icon

Package information

  • Package usage: @import usa-icon
  • Requires: required, global

All icons

225 icons. Click an icon to copy its code snippet.

<div role="region" aria-atomic="true">
  <label for="icon-filter">Type to filter icons</label>
  <input class="usa-input" id="icon-filter" class="usa-input" type="text" onkeyup="filter(this)"/>
  <p class="text-base" aria-live="polite"><span id="icon-count">225 icons.</span> Click an icon to copy its code snippet.</p>
</div>
<div class="display-flex flex-wrap margin-top-5">

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="accessibility_new accessible" aria-label="accessibility_new icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#accessibility_new"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">accessibility_new</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#accessible_forward"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">accessible_forward</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#account_balance"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">account_balance</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#account_box"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">account_box</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#account_circle"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">account_circle</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#add"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">add</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#add_circle"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">add_circle</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#add_circle_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">add_circle_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#alarm"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">alarm</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#alternate_email"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">alternate_email</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#announcement"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">announcement</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_back"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_back</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_downward"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_downward</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_drop_down"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_drop_down</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_drop_up"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_drop_up</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_forward"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_forward</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#arrow_upward"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">arrow_upward</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#api"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">api</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#assessment"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">assessment</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#attach_file"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">attach_file</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#attach_money"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">attach_money</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#autorenew"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">autorenew</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#backpack"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">backpack</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#bathtub"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">bathtub</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#bookmark"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">bookmark</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#bug_report"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">bug_report</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#build"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">build</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#calendar_today"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">calendar_today</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#campaign"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">campaign</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#cancel"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">cancel</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#chat"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">chat</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#check"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">check</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#check_box_outline_blank"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">check_box_outline_blank</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#check_circle"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">check_circle</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#check_circle_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">check_circle_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#checkroom"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">checkroom</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#clean_hands"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">clean_hands</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#close"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">close</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#closed_caption"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">closed_caption</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#cloud"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">cloud</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#code"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">code</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#comment"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">comment</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#connect_without_contact"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">connect_without_contact</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#construction"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">construction</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#contact_page"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">contact_page</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#content_copy"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">content_copy</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#coronavirus"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">coronavirus</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#credit_card"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">credit_card</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#deck"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">deck</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#delete"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">delete</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#device_thermostat"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">device_thermostat</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#directions"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">directions</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#directions_bike"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">directions_bike</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#directions_bus"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">directions_bus</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#directions_car"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">directions_car</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#directions_walk"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">directions_walk</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#do_not_disturb"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">do_not_disturb</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#do_not_touch"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">do_not_touch</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#drag_handle"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">drag_handle</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#eco"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">eco</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#edit"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">edit</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#electrical_services"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">electrical_services</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#emoji_events"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">emoji_events</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#error"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">error</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#error_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">error_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#event"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">event</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#expand_less"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">expand_less</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#expand_more"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">expand_more</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#facebook"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">facebook</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#fast_forward"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">fast_forward</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#fast_rewind"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">fast_rewind</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#favorite"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">favorite</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#favorite_border"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">favorite_border</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#file_download"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">file_download</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#file_present"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">file_present</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#file_upload"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">file_upload</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#filter_alt"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">filter_alt</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#filter_list"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">filter_list</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#fingerprint"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">fingerprint</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#first_page"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">first_page</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#flag"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">flag</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#flickr"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">flickr</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#flight"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">flight</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#folder"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">folder</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#folder_open"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">folder_open</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#format_quote"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">format_quote</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#format_size"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">format_size</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#forum"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">forum</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#github"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">github</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#grid_view"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">grid_view</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#group_add"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">group_add</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#groups"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">groups</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#hearing"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">hearing</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#help"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">help</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#help_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">help_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#highlight_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">highlight_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#history"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">history</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#home"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">home</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#hotel"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">hotel</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#hourglass_empty"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">hourglass_empty</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#image"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">image</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#info"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">info</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#info_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">info_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#insights"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">insights</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#instagram"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">instagram</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#keyboard"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">keyboard</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#label"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">label</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#language"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">language</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#last_page"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">last_page</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#launch"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">launch</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#lightbulb"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">lightbulb</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#lightbulb_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">lightbulb_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#link"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">link</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#link_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">link_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#list"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">list</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_cafe"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_cafe</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_fire_department"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_fire_department</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_gas_station"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_gas_station</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_grocery_store"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_grocery_store</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_hospital"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_hospital</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_laundry_service"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_laundry_service</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_library"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_library</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_offer"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_offer</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_parking"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_parking</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_pharmacy"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_pharmacy</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_police"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_police</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#local_taxi"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">local_taxi</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#location_city"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">location_city</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#location_on"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">location_on</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#lock"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">lock</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#lock_open"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">lock_open</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#lock_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">lock_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#login"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">login</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#logout"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">logout</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#loop"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">loop</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#mail"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">mail</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#mail_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">mail_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#map"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">map</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#masks"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">masks</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#medical_services"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">medical_services</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#menu"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">menu</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#military_tech"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">military_tech</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#more_horiz"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">more_horiz</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#more_vert"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">more_vert</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#my_location"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">my_location</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#navigate_before"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">navigate_before</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#navigate_next"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">navigate_next</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#near_me"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">near_me</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#notifications"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">notifications</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#notifications_active"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">notifications_active</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#notifications_none"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">notifications_none</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#notifications_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">notifications_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#park"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">park</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#people"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">people</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#person"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">person</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#pets"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">pets</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#phone"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">phone</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#photo_camera"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">photo_camera</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#print"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">print</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#priority_high"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">priority_high</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#public"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">public</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#push_pin"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">push_pin</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#radio_button_unchecked"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">radio_button_unchecked</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#reduce_capacity"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">reduce_capacity</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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_red_eye visibility" aria-label="remove_red_eye icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-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="/assets/img/sprite.svg#remove_red_eye"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">remove_red_eye</span>
    </button>
    <span aria-live="assertive" 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_red_eye"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-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="/assets/img/sprite.svg#remove"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">remove</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#report"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">report</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#restaurant"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">restaurant</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#rss_feed"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">rss_feed</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#safety_divider"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">safety_divider</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sanitizer"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sanitizer</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#save_alt"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">save_alt</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#schedule"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">schedule</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#school"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">school</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#science"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">science</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#search"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">search</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#security"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">security</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#send"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">send</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sentiment_dissatisfied"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sentiment_dissatisfied</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sentiment_neutral"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sentiment_neutral</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sentiment_satisfied"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sentiment_satisfied</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sentiment_satisfied_alt"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sentiment_satisfied_alt</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#sentiment_very_dissatisfied"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sentiment_very_dissatisfied</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#settings"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">settings</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#share"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">share</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#shield"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">shield</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#shopping_basket"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">shopping_basket</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#soap"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">soap</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#social_distance"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">social_distance</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#spellcheck"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">spellcheck</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#star"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">star</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#star_half"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">star_half</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#star_outline"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">star_outline</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#store"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">store</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#support"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">support</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#support_agent"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">support_agent</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#text_fields"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">text_fields</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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_off_alt rate review" aria-label="thumb_down_off_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="/assets/img/sprite.svg#thumb_down_off_alt"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">thumb_down_off_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_off_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="/assets/img/sprite.svg#thumb_up_alt"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">thumb_up_alt</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#timer"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">timer</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#toggle_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">toggle_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#toggle_on"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">toggle_on</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#topic"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">topic</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="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="/assets/img/sprite.svg#translate"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">translate</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#trending_down"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">trending_down</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#trending_up"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">trending_up</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#twitter"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">twitter</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#undo"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">undo</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#unfold_less"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">unfold_less</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#unfold_more"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">unfold_more</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#update"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">update</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#upload_file"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">upload_file</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#verified"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">verified</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#verified_user"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">verified_user</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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" 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="/assets/img/sprite.svg#visibility"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">visibility</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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" 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="/assets/img/sprite.svg#visibility_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">visibility_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#volume_off"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">volume_off</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#warning"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">warning</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#wash"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">wash</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#wifi"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">wifi</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#work"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">work</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#youtube"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">youtube</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#zoom_in"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">zoom_in</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#zoom_out_map"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">zoom_out_map</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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="/assets/img/sprite.svg#zoom_out"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">zoom_out</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" 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>