Components

Icon

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

About the icon component

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script>
  function filter(e) {
    search = e.value.toLowerCase();
    document.querySelectorAll(".icon-example").forEach(function (row) {
      text = row.getAttribute("data-meta").toLowerCase();
      if (text.match(search)) {
        row.classList.remove("display-none");
      } else {
        row.classList.add("display-none");
      }
    });
    iconCount = document.querySelectorAll(
      ".icon-example:not(.display-none)"
    ).length;
    var word = iconCount === 1 ? "icon" : "icons";
    document.getElementById("icon-count").innerHTML = `${iconCount} ${word}.`;
  }

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

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

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

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