fontawesome.com
Open in
urlscan Pro
104.18.23.52
Public Scan
Submitted URL: http://fontawesome.io/
Effective URL: https://fontawesome.com/
Submission: On November 17 via api from JP — Scanned from JP
Effective URL: https://fontawesome.com/
Submission: On November 17 via api from JP — Scanned from JP
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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">duotone</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_style_sharp solid" type="radio" name="choose-style" class="sr-only input-radio-custom" value="sharp solid"> <label for="choose_style_sharp 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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">sharp solid</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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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="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="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 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 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"
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 19,403 icons across 6 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 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. BETA INTRODUCING 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. EXPLORE FONT AWESOME SHARP! Font Awesome Sharp Solid, the first style in our new Sharp family, is ready to use when you need a special touch of class for your project! Read the announcement and see what's new in the 6.2 release. 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.2.1 19,403 PRO ICONS 68 CATEGORIES 2,018 FREE ICONS INTRODUCING FONT AWESOME SHARP SOLID! NEW THIN STYLE BETA ICON WIZARD HUMANITARIAN ICONS NEW ANIMATIONS THE WEB'S DEFAULT ICON SET, USED ON OVER 200 MILLION SITES Amazon Web Services The Beatles Docker Hover IRS 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 SHARP SOLID 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 6 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 New SHARP SOLID A DASH OF CLASS FOR A BOLD, SHARP LOOK. 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. 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. 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 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 19,403 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 Changelog Status Commission Icons License All Versions COMMUNITY GitHub Icon Requests Twitter Shirts + Stuff HELP Support Troubleshooting Contact Us Terms of Service Privacy Policy © Fonticons, Inc. Close