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-blo