Components

Icon

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

Passed WCAG 2.1 AA

About the icon component

Icons are simple symbols that attract attention, aid navigation, signal an action, add emphasis, or provide feedback. Icons serve as recognizable cues that users can understand easily — typically without thinking too hard.

Icons must be used consistently across a site or service in order to accomplish their purpose well. For example, using an envelope icon for both email and a mailing address would likely confuse people. Viewers should be able to trust that a certain icon always means the same thing, no matter where it’s used.

Type to filter icons

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

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

  function copyHTML(el) {
    code = el.querySelector("svg").outerHTML;
    messagePlaceholder = el.nextElementSibling;
    oldCopyNotice = document.getElementById("icon-copy-notice");

    if (oldCopyNotice) {
      oldCopyNotice.remove();
    }

    message = document.createElement("span");
    message.setAttribute("id", "icon-copy-notice");
    message.innerHTML = "Copied to clipboard!";

    /* Copy the text inside the text field */
    navigator.clipboard.writeText(code);
    messagePlaceholder.append(message);
  }
</script>

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

  function copyHTML(el) {
    code = el.querySelector("svg").outerHTML;
    messagePlaceholder = el.nextElementSibling;
    oldCopyNotice = document.getElementById("icon-copy-notice");

    if (oldCopyNotice) {
      oldCopyNotice.remove();
    }

    message = document.createElement("span");
    message.setAttribute("id", "icon-copy-notice");
    message.innerHTML = "Copied to clipboard!";

    /* Copy the text inside the text field */
    navigator.clipboard.writeText(code);
    messagePlaceholder.append(message);
  }
</script>

Guidance

When to use the icon component

• Draw attention to actions. Icons, when paired with text, grab attention and show actions to take. Make sure each icon directly relates to any text it accompanies.
• Help readers find key information. Use icons as scannable, easy-to-understand visual cues for key information, like a phone number or email address.
• Enhance an actionable target. Icons make great touch or click targets. Use an icon for common actions, like opening a menu or sharing an article.

When to consider something else

• Meaning is ambiguous. Use icons only in a common or conventional way. Icon utility hinges on people quickly recognizing what each icon means. If you suspect that an icon’s intent isn’t perfectly clear, consider removing it or adding accompanying text.
• Compensating for page structure. Don’t rely on an icon to help draw attention to something important that’s otherwise hard to find. Icons don’t fix unclear page hierarchy or confusing content organization.
• You need illustrative artwork. Icons have a specific, functional meaning. Avoid using icons for illustrative purposes. For example, don’t use the “visibility” eye icon () to illustrate an actual eye. If you want to enhance the appearance of your content or visually explain a concept, use an illustration instead of an icon.

Usability guidance

• Combine icons with text. Only a few icons are consistently understood across the digital-using public of the world, among them home (), print (), and search (). Combine icons with text to improve clarity, and test your icons for recognition and memorability with your particular audience.
• Be consistent with icon meaning. Icons used more than once in an application or site must be used to represent the same thing, and have the same text description in every instance. For example, if an icon of a blank piece of paper means “new document” on most screens, choose a different icon to communicate “reformat document.” Consistency helps people with some cognitive disabilities, helps people who might be distracted or scanning, and creates a better user experience for all.
• Combine interactive icons with other components. If the icon is part of an interactive element, it should be implemented within another functional component. For example, make an icon part of a button or list.

Accessibility guidance

Test the icon component in your own project.

USWDS tested the icon component for accessibility. You should test your implementation, too.

Use icon accessibility tests

• Hide decorative icons from screen readers. Icons are decorative if they don’t provide meaningful information to the user. Usually, decorative icons are accompanied by text. Announcing a decorative icon is redundant and can be annoying. Use the aria-hidden="true" and role="img", as in the following code:

  <a href="https://twitter.com/uswds">
    <svg class="usa-icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#arrow_forward"></use>
    </svg>
    USWDS' Twitter account
  </a>
  

• Provide descriptive text if a standalone icon has meaning or provides functionality. If an icon provides information or functionality that people cannot understand from accompanying text, you need to make the icon perceivable to people who use screen readers. Remove the aria-hidden="true" attribute and add an aria-labelledby attribute with a value that matches the id of a <title> element added inside the SVG, as in the following code:

  <a href="https://twitter.com/uswds">
    <svg aria-labelledby="twitter-title" role="img">
      <title id="twitter-title">USWDS' Twitter account</title>
      <use xlink:href="/path/to/sprite.svg#twitter"></use>
    </svg>
  </a>
  

• Check for good color contrast. Make sure that the icon has a minimum contrast ratio of 3:1 against its background. See the USWDS color and accessibility page as well as WCAG 2.1 Techniques: Ensuring that a contrast ratio of 3:1 is provided for icons for more information.
• Place icons inside links. If icons accompany a text link, place the icon inside the link to prevent screen readers from announcing the link twice.

Using the icon component

• Don’t alter icons. You shouldn’t customize, combine, or change USWDS icons (other than updating the color) due to their license.
• Active icons are found in dist/img/usa-icons. The icons in this directory will be packaged into an SVG sprite. The complete set of available icons are located in two directories: dist/img/material-icons and dist/img/uswds-icons. Copy icons into a usa-icons directory within your project images directory, and rebuild the SVG sprite using uswds-compile.
• Using color in icons. Icons use currentColor, so the color of the icon will be the text color of its parent element. Change colors with the color utility.
• Relative to font size. By default, icons will scale with font size. If you want to specify an icon size, use one of the component’s size variants.
• Icon names are identifiers. To use an icon, simply change the identifier after the pound sign in the sprite path to that icon’s name. For example, to use the accessibility_new icon, the path will be <use xlink:href="/path/to/sprite.svg#accessibility_new">, or to use the info icon, the path will be <use xlink:href="/path/to/sprite.svg#info">.

Icon settings

This component has no settings.

Icon variants

Variant	Description
.usa-icon--size-3	3 unit x 3 unit icon.
.usa-icon--size-4	4 unit x 4 unit icon.
.usa-icon--size-5	5 unit x 5 unit icon.
.usa-icon--size-6	6 unit x 6 unit icon.
.usa-icon--size-7	7 unit x 7 unit icon.
.usa-icon--size-8	8 unit x 8 unit icon.
.usa-icon--size-9	9 unit x 9 unit icon.

Accessibility test status

The USWDS team did 5 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
5	0	0	5	0

Overview of recent accessibility test results:

• Passed: 0
• Passed with exceptions: 0
• Conditional: 5
• Failed: 0

Learn more on the icon accessibility tests page.

Package

• Package usage: @forward "usa-icon";
• Dependencies: uswds-core

Disclaimer

Use of any social media icons placed on this page are subject to separate terms and conditions that govern the use of said icons. The General Services Administration (GSA) does not review and evaluate such agreements for anything beyond the GSA’s needs, and users should make their own decisions regarding the use of such services for their own purposes. In addition, a reference to any non-federal entity does not constitute or imply its endorsement, recommendation, or favoring by GSA.

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-06-07	N/A	Guidance	No	Added clarity to icon guidance. More information: uswds-site#2643
2024-03-20	N/A	Guidance	No	Added WCAG compliance tag and accessibility test status section. More information: uswds-site#2518
2023-11-09	3.7.0	Assets	No	Added the X social media icon. We also preserved the legacy Twitter icon to allow teams to make the decision on when to update their social media information. More information: uswds#5589
2023-10-20	N/A	Guidance	No	Added note about icon color contrast. More information: uswds-site#2258
2023-09-29	N/A	Guidance	No	Added social media icon disclaimer. This disclaimer explains that social media icons are subject to separate terms and conditions, and that our inclusion of these icons does not constitute an endorsement of these services. More information: uswds-site#2292
2022-10-19	3.2.0	JavaScript	No	Updated our SVG sprite compiler to fix potential incompatibility with ARM-based Macs. This should resolve potential dependency incompatibilities on computers with ARM processors. More information: uswds#4665
2022-08-05	3.1.0	Assets	No	Added LinkedIn icon. We now have a LinkedIn icon included in our default icon sprite as linkedin. More information: uswds#4872
2022-08-05	3.1.0	Assets	Breaking	Breaking Added unmodified social media icons. We now provide simpler social media icons, and removed any decoration not in the original icon. This means that the new icons are not in an enclosing circle unless the original icon is enclosed in a circle. More information: uswds#4872
2022-06-17	3.0.2	Assets	No	Updated us_flag_small to be high resolution. More information: uswds#4792
2022-06-17	3.0.2	Assets	No	Added fax to the default set. More information: uswds#4797
2022-06-17	3.0.2	Assets	No	Added remove_circle to the default set. More information: uswds#4791
2022-06-17	3.0.2	Assets Styles	No	Navigate_far icons now accept custom color. We fixed the navigate_far_before and navigate_far_next icons to allow a customColor fill. More information: uswds#4780
2022-04-28	3.0.0	Assets JavaScript Styles	Breaking	Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656
2022-03-10	N/A	Guidance	No	Replaced uswds-gulp with uswds-compile. More information: uswds-site#1424
2022-03-07	2.13.2	Assets	No	Fixed GitHub icon to prevent CSP flag. Resolves an error which can occur when using the USWDS icon component SVG sprite in combination with a Content Security Policy (CSP), where the presence of an inline style tag within the GitHub icon can violate most common CSPs which do not include the unsafe-inline style-src directive. More information: uswds#4487
2021-12-14	2.13.0	Accessibility Assets Markup	Breaking	Breaking Improved resilience of icon-only functionality. We updated a couple components that use icon-only buttons so that they provide a text equivalent if the image path is broken and does not load. More information: uswds#4211
2021-04-28	2.11.2	Assets	Breaking	Breaking Fixed the size of some of our icons. The view box on some or our icons was 20px instead of 24px. We updated these icons to use the proper view box. This may result in small changes to the display of icons, but will result in a more consistent placement and appearance across all icons in our icon set. More information: uswds#4139
2021-04-28	2.11.2	Assets	No	Swapped thumb icons in our sprite for consistency. We replaced thumb_down_off_alt with thumb_down_off in our icon sprite for consistency with its thumb_up pair. More information: uswds#4139
2021-04-28	2.11.2	Assets	Breaking	Breaking Removed duplicate eye icon. Removes remove_red_eye icon from usa-icons and sprite. Use visibility instead. More information: uswds#4139
2021-03-17	N/A	Guidance	No	Updated and improved guidance for icons. More information: uswds-site#1180
2021-03-17	2.11.1	Assets	No	Restored missing white icons. Restored add--white, check_circle--white, error--white, expand_more--white, info--white, remove--white, and warning--white icons. More information: uswds#4106
2021-03-17	2.11.0	Assets Styles	No	Provided better support for color icons that adapt to theme settings. Now the color of the alert icon will update automatically to adapt to the alert background, or to the color of the alert text. More information: uswds#4079
2021-03-02	2.10.2	Assets	No	Introduced white add, remove, and expand_more icons. More information: uswds#4061