urlscan.io logo urlscan.io
SecurityTrails logo

fontawesome.com Open in urlscan Pro
104.18.23.52  Public Scan

Back to summary
Submitted URL: http://fontawesome.com/
Effective URL: https://fontawesome.com/
Submission: On July 06 via manual from US — Scanned from DE

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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">sparkles</h5>
      </label></div>
  </div>
  <div id="style-chooser" class="row display-none">
    <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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" class=""></path>
          </svg></div>
        <h5 class="margin-top-7xs margin-bottom-0 text-left">duotone</h5>
      </label></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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
                class="fa-secondary"></path>
              <path fill="currentColor" d="M352 256C352 309 309 352 256 352C202.1 352 160 309 160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256z" 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="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z" 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="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"
        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 16,083 icons across 5 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="M0 144v288C0 457.6 22.41 480 48 480H96V96H48C22.41 96 0 118.4 0 144zM336 0h-160C150.4 0 128 22.41 128 48V480h256V48C384 22.41 361.6 0 336 0zM336 96h-160V48h160V96zM464 96H416v384h48c25.59 0 48-22.41 48-48v-288C512 118.4 489.6 96 464 96z"
        class=""></path>
    </svg>Send Kit Code </button></form>

Text Content

Open Main Menu
Font Awesome
Start Search Icons Icons Docs Plans Support Blog
Sign In
Font Awesome 6.1.1 is now available with a new Humanitarian Icons category and
more. See everything that's new.


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.

MORE ICONS

Font Awesome 6 contains over 7,000 new icons, so you're sure to find what you
need for your project. Plus, we've redesigned most of our icons from scratch, so
they're more consistent and easier to use.

MORE STYLES

Font Awesome 6 includes five icons styles: solid, regular, light, duotone, and
the new THIN style — not to mention all of our brand icons. And coming later in
2022 is the entirely new SHARP family of styles.

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.1.1



16,083 PRO ICONS

68 CATEGORIES



2,009 FREE ICONS

NEW ICONS IN 6.1

NEW THIN STYLE

ICON UPLOAD

HUMANITARIAN ICONS

NEW ANIMATIONS


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

New Relic
Docker
NBC News
Inc. Magazine
McDonalds


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

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



5 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.

BRANDS

THE EASIEST WAY TO ADD SOCIAL LOGOS TO YOUR SITE.

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 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 five 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 16,083 icons in 68 categories across five 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

Changelog Status Commission Icons License All Versions


COMMUNITY

GitHub Issues Icon Requests Leaderboard Twitter


HELP

Support Troubleshooting Contact Us
Terms of Service Privacy Policy

© Fonticons, Inc.




Closecross-small