Components

Icon

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

About the icon component

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

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

240 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">240 icons.</span> Click an icon to copy its code snippet.</p>
</div>
<div class="display-flex flex-wrap margin-top-5">

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="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="bedding blanket" aria-label="bedding icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#bedding"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">bedding</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="bedding"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="bookmark " aria-label="bookmark icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="camping tent shelter" aria-label="camping icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#camping"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">camping</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="camping"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="cancel x close" aria-label="cancel icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="clothes shirt sweater clothing" aria-label="clothes icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#clothes"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">clothes</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="clothes"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="close x" aria-label="close icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="construction_worker maintenance" aria-label="construction_worker icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#construction_worker"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">construction_worker</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="construction_worker"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="contact_page " aria-label="contact_page icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="flooding water weather flood" aria-label="flooding icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#flooding"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">flooding</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="flooding"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="folder " aria-label="folder icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="hospital emergency doctor help" aria-label="hospital icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#hospital"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">hospital</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="hospital"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="hotel motel lodging" aria-label="hotel icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="hurricane weather storm" aria-label="hurricane icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#hurricane"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">hurricane</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="hurricane"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="identification id card document" aria-label="identification icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#identification"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">identification</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="identification"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="image photo picture" aria-label="image icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="navigate_far_before chevron double arrow left direction" aria-label="navigate_far_before icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#navigate_far_before"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">navigate_far_before</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="navigate_far_before"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="navigate_far_next chevron double arrow right direction" aria-label="navigate_far_next icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#navigate_far_next"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">navigate_far_next</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="navigate_far_next"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="near_me location compass proximity" aria-label="near_me icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="rain weather water storm" aria-label="rain icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#rain"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">rain</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="rain"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="reduce_capacity occupancy" aria-label="reduce_capacity icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="severe_weather storm" aria-label="severe_weather icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#severe_weather"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">severe_weather</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="severe_weather"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="schedule clock" aria-label="schedule icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="snow storm weather winter emergency blizzard" aria-label="snow icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#snow"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">snow</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="snow"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="soap sanitize safety hand wash" aria-label="soap icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="sort_arrow direction up down" aria-label="sort_arrow icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#sort_arrow"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">sort_arrow</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="sort_arrow"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="spellcheck edit" aria-label="spellcheck icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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="tornado storm weather wind emergency" aria-label="tornado icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/assets/img/sprite.svg#tornado"></use>
</svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">tornado</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="tornado"></span>
  </div>

  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="translate " aria-label="translate icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="/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>