fontawesome.com Open in urlscan Pro
104.18.22.52  Public Scan

Form analysis
3 forms found in the DOM

<form>
  <div id="icon-chooser" class="row">
    <div class="column-6 tablet:column-4"><input id="choose_icon_camera-retro" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="camera-retro"> <label for="choose_icon_camera-retro" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">camera-retro</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_icon_hand-wave" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="hand-wave"> <label for="choose_icon_hand-wave" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">hand-wave</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_icon_house-chimney" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="house-chimney"> <label for="choose_icon_house-chimney" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">house-chimney</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_icon_poo-storm" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="poo-storm"> <label for="choose_icon_poo-storm" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">poo-storm</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_icon_rocket-launch" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="rocket-launch"> <label for="choose_icon_rocket-launch" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">rocket-launch</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_icon_sparkles" type="radio" name="choose-icon" class="sr-only input-radio-custom" value="sparkles"> <label for="choose_icon_sparkles" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">sparkles</h5>
      </label></div>
  </div>
  <div id="style-chooser" class="display-none">
    <div class="buttons display-flex margin-bottom-3xl"><button class="flat padding-y-xs active"
        style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--fa-navy); --button-hover-color: var(--fa-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white); font-weight: var(--font-weight-bold);">
        Classic </button><button class="flat padding-y-xs"
        style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--white); --button-hover-color: var(--fa-dk-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white);">
        Sharp </button></div>
    <div class="row roomy">
      <div class="column-6 tablet:column-4"><input id="choose_style_solid" type="radio" name="choose-style" class="sr-only input-radio-custom" value="solid"> <label for="choose_style_solid" class="margin-right-0 margin-bottom-md"
          style="cursor: pointer; display: flex !important;">
          <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
              class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg" style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
              <g class="fa-duotone-group">
                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
                <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
              </g>
            </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
              style="color: var(--white);">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
            </svg></div>
          <h5 class="margin-top-7xs margin-bottom-0 text-left">Solid</h5>
        </label></div>
      <div class="column-6 tablet:column-4"><input id="choose_style_regular" type="radio" name="choose-style" class="sr-only input-radio-custom" value="regular"> <label for="choose_style_regular" class="margin-right-0 margin-bottom-md"
          style="cursor: pointer; display: flex !important;">
          <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
              class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg" style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
              <g class="fa-duotone-group">
                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
                <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
              </g>
            </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
              style="color: var(--white);">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
            </svg></div>
          <h5 class="margin-top-7xs margin-bottom-0 text-left">Regular</h5>
        </label></div>
      <div class="column-6 tablet:column-4"><input id="choose_style_light" type="radio" name="choose-style" class="sr-only input-radio-custom" value="light"> <label for="choose_style_light" class="margin-right-0 margin-bottom-md"
          style="cursor: pointer; display: flex !important;">
          <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
              class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg" style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
              <g class="fa-duotone-group">
                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
                <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
              </g>
            </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
              style="color: var(--white);">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
            </svg></div>
          <h5 class="margin-top-7xs margin-bottom-0 text-left">Light</h5>
        </label></div>
      <div class="column-6 tablet:column-4"><input id="choose_style_thin" type="radio" name="choose-style" class="sr-only input-radio-custom" value="thin"> <label for="choose_style_thin" class="margin-right-0 margin-bottom-md"
          style="cursor: pointer; display: flex !important;">
          <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
              class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg" style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
              <g class="fa-duotone-group">
                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
                <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
              </g>
            </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
              style="color: var(--white);">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
            </svg></div>
          <h5 class="margin-top-7xs margin-bottom-0 text-left">Thin</h5>
        </label></div>
      <div class="column-6 tablet:column-4"><input id="choose_style_duotone" type="radio" name="choose-style" class="sr-only input-radio-custom" value="duotone"> <label for="choose_style_duotone" class="margin-right-0 margin-bottom-md"
          style="cursor: pointer; display: flex !important;">
          <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
              class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg" style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
              <g class="fa-duotone-group">
                <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
                <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
              </g>
            </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
              style="color: var(--white);">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
            </svg></div>
          <h5 class="margin-top-7xs margin-bottom-0 text-left">Duotone</h5>
        </label></div> <!---->
    </div>
  </div>
  <div id="color-chooser" class="row display-none">
    <div class="column-6 tablet:column-4"><input id="choose_color_none" type="radio" name="choose-color" class="sr-only input-radio-custom" value="none"> <label for="choose_color_none" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_color_red" type="radio" name="choose-color" class="sr-only input-radio-custom" value="#e03131"> <label for="choose_color_red" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">red</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_color_yellow" type="radio" name="choose-color" class="sr-only input-radio-custom" value="#fab005"> <label for="choose_color_yellow" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">yellow</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_color_teal" type="radio" name="choose-color" class="sr-only input-radio-custom" value="#0ca678"> <label for="choose_color_teal" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">teal</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_color_blue" type="radio" name="choose-color" class="sr-only input-radio-custom" value="#1c7ed6"> <label for="choose_color_blue" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">blue</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_color_purple" type="radio" name="choose-color" class="sr-only input-radio-custom" value="#9c36b5"> <label for="choose_color_purple" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">purple</h5>
      </label></div>
  </div>
  <div id="size-chooser" class="row display-none">
    <div class="column-6 tablet:column-4"><input id="choose_size_2xs" type="radio" name="choose-size" class="sr-only input-radio-custom" value="2xs"> <label for="choose_size_2xs" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">2xs</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_size_xs" type="radio" name="choose-size" class="sr-only input-radio-custom" value="xs"> <label for="choose_size_xs" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">xs</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_size_sm" type="radio" name="choose-size" class="sr-only input-radio-custom" value="sm"> <label for="choose_size_sm" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">sm</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_size_none" type="radio" name="choose-size" class="sr-only input-radio-custom" value="none"> <label for="choose_size_none" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_size_lg" type="radio" name="choose-size" class="sr-only input-radio-custom" value="lg"> <label for="choose_size_lg" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">lg</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_size_xl" type="radio" name="choose-size" class="sr-only input-radio-custom" value="xl"> <label for="choose_size_xl" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">xl</h5>
      </label></div>
  </div>
  <div id="animate-chooser" class="row display-none">
    <div class="column-6 tablet:column-4"><input id="choose_animate_none" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="none"> <label for="choose_animate_none" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_animate_beat" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="beat"> <label for="choose_animate_beat" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">beat</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_animate_bounce" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="bounce"> <label for="choose_animate_bounce" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">bounce</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_animate_flip" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="flip"> <label for="choose_animate_flip" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">flip</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_animate_shake" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="shake"> <label for="choose_animate_shake" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">shake</h5>
      </label></div>
    <div class="column-6 tablet:column-4"><input id="choose_animate_spin" type="radio" name="choose-animate" class="sr-only input-radio-custom" value="spin"> <label for="choose_animate_spin" class="margin-right-0 margin-bottom-md"
        style="cursor: pointer; display: flex !important;">
        <div class="padding-right-xs"><svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="checked-icon svg-inline--fa fa-circle-dot fa-fw fa-lg"
            style="--fa-secondary-opacity: 1; --fa-primary-color: var(--white); --fa-secondary-color: var(--fa-navy);">
            <g class="fa-duotone-group">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" class="fa-secondary"></path>
              <path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
            </g>
          </svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
            style="color: var(--white);">
            <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">spin</h5>
      </label></div>
  </div>
</form>

<form class="icons-search form line-length-md padding-y-4xl margin-bottom-sm margin-auto" style="--form-button-margin: 0;">
  <div class="with-icon-before" style="--input-with-icon-color: var(--fa-navy); --input-border-color: var(--fa-navy); --input-placeholder-color: var(--fa-md-gravy);"><svg aria-hidden="true" focusable="false" data-prefix="fas"
      data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-magnifying-glass" style="line-height: 1;">
      <path fill="currentColor"
        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
        class=""></path>
    </svg> <label for="icons-search" class="sr-only"> Search the v6 Beta Icons </label> <input id="search" type="text" name="icons-search" placeholder="Search 26,107 icons across 8 styles + brands..." class="rounded"> <button type="submit"
      class="sr-only"> Search Icons </button></div>
</form>

<form class="margin-top-3xl"><label for="email" class="margin-bottom-sm"> Enter your email to create your first kit! </label> <!----> <input id="email" name="email" type="email" placeholder="e.g. violet@freshsqueezed.org" autocapitalize="none"
    autocorrect="off" required="required" class=""> <button type="submit" class="btn block accent"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="suitcase" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
      class="margin-right-sm svg-inline--fa fa-suitcase fa-fw fa-lg">
      <path fill="currentColor"
        d="M176 56V96H336V56c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zM128 96V56c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56V96v32V480H128V128 96zM64 96H96V480H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64zM448 480H416V96h32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64z"
        class=""></path>
    </svg> Send Kit Embed Code </button></form>

Text Content

Open Main Menu
Font Awesome
Start Search Icons Icons Docs Plans Support Blog
Sign In


TAKE THE HASSLE OUT OF ICONS IN YOUR DESIGNS.

Font Awesome is the Internet's icon library and toolkit, used by millions of
designers, developers, and content creators.

Start for Free Get More with Pro



LATEST UPDATES


DISCOVER WHAT'S NEW IN FONT AWESOME.

NEW INTRODUCING FONT AWESOME SHARP LIGHT!

Font Awesome Sharp Light has arrived! It's perfect for when you need to add a
breezy, light touch of modern elegance. Read the announcement and see what's new
in the 6.4.0 release.

BETA EXPLORE THE ICON WIZARD!

With our new Icon Wizard, you can magically add a modifier – like circle-plus,
slash, or even poop – to almost any Font Awesome icon. Available now to Font
Awesome Pro subscribers.

MORE PLUGINS + PACKAGES

Font Awesome 6 makes it even easier to use icons where you want to. More plugins
and packages to match your stack. Less time wrestling browser rendering.

VERSION 6.4.0



26,107 PRO ICONS

68 CATEGORIES



2,020 FREE ICONS

INTRODUCING FONT AWESOME SHARP LIGHT!

NEW THIN STYLE

BETA ICON WIZARD

HUMANITARIAN ICONS

NEW ANIMATIONS


THE WEB'S DEFAULT ICON SET, USED ON OVER 200 MILLION SITES

Outschool
Fitbit
IRS
The Beatles
Figma


PROUDLY OPEN SOURCE


EVERYONE GETS MORE AWESOME.

We know the pain of wrangling icons on the internet. That's why in 2012, we
created the first version of our open-source icons and toolkit. And with the
help of our subscription plan Font Awesome Pro, we've built a lean icon-obsessed
team who keep cranking out more icons, more styles, and more services for
everyone.

Explore Font Awesome Free

ALWAYS FREE

From the beginning, Font Awesome has been free and open source. And since we're
creator owned and operated, we get to make sure Font Awesome Free stays that
way.

NO SHENANIGANS

We have more icons, services, and support in Pro. If you want them, you
subscribe. No shenanigans. We won't sell your data, because we don't want to
live in that world, and we don't want to run that company.

SUPPORT OPEN SOURCE

Give back to the open-source community by subscribing to Font Awesome Pro. In
fact, Pro subscribers helped grow Font Awesome Free icons by over 250% since
version 4.

FONT AWESOME IS ONE OF THE TOP OPEN SOURCE PROJECTS ON GITHUB.



Icon

Style

Color

Size

Animate

CAMERA-RETRO

HAND-WAVE

HOUSE-CHIMNEY

POO-STORM

ROCKET-LAUNCH

SPARKLES

Classic Sharp

SOLID

REGULAR

LIGHT

THIN

DUOTONE

NONE

RED

YELLOW

TEAL

BLUE

PURPLE

2XS

XS

SM

NONE

LG

XL

NONE

BEAT

BOUNCE

FLIP

SHAKE

SPIN

<i class=" fa-duotone fa-camera-retro " style=" color: #1c7ed6; " ></i>



STYLING TOOLS


STYLE YOUR ICONS TO YOUR FA-HEART'S CONTENT.

You know and WE know styling icons on the web can be a bit of a chore. That's
why we fine-tuned our styling tools like a Swiss watch to make icons more
malleable right out of the box. Easily size, place, style, and even animate any
icon with a short line of code to create the perfect effect.
Bippity-boppity-ICON!

View All Styling Options

THOUSANDS OF ICONS



8 STYLES



QUICK COLOR



POWER TRANSFORMS

BUILT-IN SIZING



ANIMATIONS



ROTATE + FLIP



EASY LISTS


ICON DISCOVERY


THESE ARE THE ICONS YOU'RE LOOKING FOR.

Have you ever squandered hours scanning the dank, skeezy corners of the internet
scrounging up the icons you need? Us too. That's why we re-engineered our icon
search from the ground up with ease of icon findability in mind, so you can
match your brand with the perfect look and feel.
Search the v6 Beta Icons Search Icons

EMOJI

New

FRUITS + VEGETABLES

New

ALPHABET

New

MARITIME

SCIENCE FICTION

ALL CATEGORIES

SOLID

GREAT FOR SMALL SIZES AND BRINGING CONTRAST TO TEXT.

REGULAR

EASY, READABLE ICONS THAT BLEND IN WITH REGULAR TEXT.

LIGHT

WHEN A LIGHTER TOUCH IS NEEDED.


New

THIN

FITS IN WITH THE LASTEST SUPER-LIGHT DESIGNS.

DUOTONE

GREAT FOR AN ILLUSTRATED FEEL & GRABBING ATTENTION.


New

SHARP SOLID

A DASH OF CLASS FOR A BOLD, SHARP LOOK.


New

SHARP REGULAR

SHARPEN YOUR DESIGNS WITH STRAIGHTFORWARD ICONS.


New

SHARP LIGHT

ADD A BREEZY, LIGHT TOUCH OF MODERN ELEGANCE.

BRANDS

THE EASIEST WAY TO ADD SOCIAL LOGOS TO YOUR SITE.


CUSTOMIZE WITH A KIT


HAVE ICONS, WILL TRAVEL.

Pack up your very own custom version of Font Awesome, and get started easily
with a Kit lickity-split. We'll bundle only the icons, tools, and settings you
need, so you can travel light wherever you go.

Enter your email to create your first kit! Send Kit Embed Code

THE LATEST AND GREATEST

Kits auto-update to the newest version of Font Awesome, so you can stop managing
files and pushing code.

AUTO-ACCESSIBILITY & MORE

Automate your icons' accessibility, control load timing, ensure Font Awesome
Version 4 compatibility, and more.

SUPER SIMPLE SUBSETTING

Speed up your site with a super-lean, ultra-fast version of Font Awesome! Choose
just the icons you need, and your Kit serves them up as a subset, making it
faster than ever.

POWERED BY CLOUDFLARE

Font Awesome Kits are served using Cloudflare, so you know they’re secure,
private, fast, and reliable.


THE RIGHT TOOL FOR THE JOB


NO NEED TO REINVENT THE WHEEL.

Whether you're working on a website, app, or project, we've got a set of tools
that work how and where you do. So there's no need to hack your way through your
next build.

GREAT FOR DEVELOPERS

We've got frameworks and toolkits for the most popular plugins and packages that
already work the way you expect.

JS FRAMEWORKS



WEBFONT & SVG TOOLKITS



OFFICIAL APIS

GREAT FOR DESIGNERS

Use your own designs alongside thousands of matching Font Awesome icons in each
of six unique styles.

TEXT-TO-ICON LIGATURES



CUSTOM ICON UPLOAD



PIXEL-PERFECT ICONS

GREAT FOR CONTENT CREATORS

With oodles of free icons — including brands + social icons — our syntax is easy
to use in authoring tools like WordPress and more.

THOUSANDS OF UNIQUE ICONS



BRAND + SOCIAL ICONS



WORDPRESS SHORTCODES


FUTUREPROOFED


WE GROW WITH YOU.

Setting up your first project with Font Awesome is a breeze, and we keep pace as
your needs change over time. Font Awesome works where, and how, you do. And when
you're ready, Font Awesome Pro gives you more icons, styles, and developer and
designer tools — which helps streamline your workflows and save time.

Subscribe to Pro

GET ACCESS TO AN EVER-EXPANDING COLLECTION OF ICONS.

As your design needs ramp up, Font Awesome Pro is there to meet you. With Pro
you get thousands of icons in multiple styles — and counting!

CREATE SPACE FOR COLLABORATION.

As your team fills out, we can accommodate that growth with a Pro license seat
for everyone at the table, no matter your company size.

ADD YOUR OWN ICONS AND LOGOS.

Now you can upload your own logos and icons to a Kit and easily use our styling
options right alongside Font Awesome icons.

CUSTOMIZE FONT AWESOME.

Create a new Kit for each site you work on. We'll subset only the icons you
need, and automate both updates and accessibility.


ICON COMMISSIONS


ANY ICON YOU CAN IMAGINE.

Can't find the exact icon you need? Think of Font Awesome as your very own
in-house icon magician. We'll design it for you — alakazam! — and add it to Font
Awesome 6.

1 ICON
$300

Add that single icon you've always wanted in all of Font Awesome's styles.

6 ICONS
$1,500

Just say the magic word, and six icons of your choice will appear in all of our
styles.

24 ICONS
$4,800

Your wish is our command — add twenty-four icons of your choice in all of our
styles.

YOUR LOGO
$3,000

Make your brand's existing logo known and accessible to millions of users by
adding it to Font Awesome Free.


UPGRADE TO FONT AWESOME PRO

Font Awesome Pro gives you 26,107 icons in 68 categories across six styles +
brands. Plus, Actual Human™ tech support, hosted Pro Kits, Pro npm, and more!

Get Font Awesome Pro
Font Awesome


GO MAKE SOMETHING AWESOME

Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators.

Made with love and in Bentonville, Boston, Chicago, Grand Rapids, Joplin, Kansas
City, Seattle, Tampa, and Vergennes.


PROJECT

Download Changelog Commission Icons All Versions


COMMUNITY

GitHub Icon Requests Twitter Shirts + Stuff


HELP

Support Troubleshooting Contact Us Status
License Terms of Service Privacy Policy Refunds

© Fonticons, Inc.




Close