fontawesome.com
Open in
urlscan Pro
104.18.23.52
Public Scan
Submitted URL: http://fontawesome.com/
Effective URL: https://fontawesome.com/
Submission: On September 26 via manual from UY — Scanned from DE
Effective URL: https://fontawesome.com/
Submission: On September 26 via manual from UY — Scanned from DE
Form analysis 3 forms found in the DOM
<form><label for="email" class="margin-top-0 margin-bottom-sm"> Enter your email to get started for Free! </label> <!----> <input id="email" name="email" type="email" placeholder="e.g. violet@freshsqueezed.org" autocapitalize="none" autocorrect="off"
required="required" class="">
<div class="margin-top-md margin-bottom-xl"><input id="accept-policies" name="accept-policies" type="checkbox" required="required" value="I agree to the Terms of Service, Data Processing Agreement, and Privacy Policy."> <label for="accept-policies"
class="margin-0" style="--label-display: inline; --label-font-size: var(--font-size-sm); --link-color: var(--fa-navy);"><span class="size-sm"> I agree to the <a href="/tos" class="strong">
Terms of Service</a>, <a href="/privacy" class="strong">
Privacy Policy</a> and <a href="/dpa" class="strong">
Data Processing Agreement</a>. </span></label></div> <button type="submit" disabled="disabled" class="btn block accent"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rocket-launch" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="margin-right-sm svg-inline--fa fa-rocket-launch fa-fw fa-lg">
<path fill="currentColor"
d="M117.8 128l89.3 0C286.9-3.7 409.5-8.5 483.9 5.3c11.6 2.2 20.7 11.2 22.8 22.8c13.8 74.4 9 197-122.7 276.9l0 89.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9l0-114.7c0-22.6-9-44.3-25-60.3s-37.7-25-60.3-25L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3zM424 128a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zM166.5 470C132.3 504.3 66 511 28.3 511.9c-16 .4-28.6-12.2-28.2-28.2C1 446 7.7 379.7 42 345.5c34.4-34.4 90.1-34.4 124.5 0s34.4 90.1 0 124.5zm-46.7-36.4c11.4-11.4 11.4-30 0-41.4s-30-11.4-41.4 0c-10.1 10.1-13 28.5-13.7 41.3c-.5 8 5.9 14.3 13.9 13.9c12.8-.7 31.2-3.7 41.3-13.7z"
class=""></path>
</svg> Start for Free </button>
</form><form class="icons-search form line-length-md padding-y-4xl margin-bottom-sm margin-auto" style="--form-button-margin: 0;">
<div class="with-icon-before" style="--input-with-icon-color: var(--fa-navy); --input-border-color: var(--fa-navy); --input-placeholder-color: var(--fa-md-gravy);"><svg aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-magnifying-glass" style="line-height: 1;">
<path fill="currentColor"
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
class=""></path>
</svg> <label for="icons-search" class="sr-only"> Search the v6 Beta Icons </label> <input id="search" type="text" name="icons-search" placeholder="Search 33,612 icons across 10 styles + brands..." class="rounded"> <button type="submit"
class="sr-only"> Search Icons </button></div>
</form><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 with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">camera-retro</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_icon_hand-wave" type="radio" name="choose-icon" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">hand-wave</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_icon_house-chimney" type="radio" name="choose-icon" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">house-chimney</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_icon_poo-storm" type="radio" name="choose-icon" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">poo-storm</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_icon_rocket-launch" type="radio" name="choose-icon" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">rocket-launch</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_icon_sparkles" type="radio" name="choose-icon" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">sparkles</h5>
</label></div>
</div>
<div id="style-chooser" class="display-none">
<div class="buttons display-flex margin-bottom-3xl"><button class="flat padding-y-xs active"
style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--fa-navy); --button-hover-color: var(--fa-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white); font-weight: var(--font-weight-bold);">
Classic </button><button class="flat padding-y-xs"
style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--white); --button-hover-color: var(--fa-dk-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white);">
Duotone </button><button class="flat padding-y-xs"
style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--white); --button-hover-color: var(--fa-dk-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white);">
Sharp </button><button class="flat padding-y-xs"
style="--button-background: var(--fa-dk-blue); --button-color: var(--white); --button-hover-background: var(--white); --button-hover-color: var(--fa-dk-blue); --button-active-background: var(--fa-navy); --button-active-color: var(--white);">
Sharp Duotone </button></div>
<div class="row roomy">
<div class="column-6 tablet:column-3"><input id="choose_style_solid" type="radio" name="choose-style" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">Solid</h5>
</label></div>
<div class="column-6 tablet:column-3"><input id="choose_style_regular" type="radio" name="choose-style" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">Regular</h5>
</label></div>
<div class="column-6 tablet:column-3"><input id="choose_style_light" type="radio" name="choose-style" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">Light</h5>
</label></div>
<div class="column-6 tablet:column-3"><input id="choose_style_thin" type="radio" name="choose-style" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">Thin</h5>
</label></div>
</div>
</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 with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_color_red" type="radio" name="choose-color" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">red</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_color_yellow" type="radio" name="choose-color" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">yellow</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_color_teal" type="radio" name="choose-color" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">teal</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_color_blue" type="radio" name="choose-color" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">blue</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_color_purple" type="radio" name="choose-color" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">purple</h5>
</label></div>
</div>
<div id="size-chooser" class="row display-none">
<div class="column-6 tablet:column-4"><input id="choose_size_2xs" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">2xs</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_size_xs" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">xs</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_size_sm" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">sm</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_size_none" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_size_lg" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">lg</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_size_xl" type="radio" name="choose-size" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">xl</h5>
</label></div>
</div>
<div id="animate-chooser" class="row display-none">
<div class="column-6 tablet:column-4"><input id="choose_animate_none" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">none</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_animate_beat" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">beat</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_animate_bounce" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">bounce</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_animate_flip" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">flip</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_animate_shake" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">shake</h5>
</label></div>
<div class="column-6 tablet:column-4"><input id="choose_animate_spin" type="radio" name="choose-animate" class="sr-only with-icon" 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 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm352 0a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z" class="fa-secondary"></path>
<path fill="currentColor" d="M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z" class="fa-primary"></path>
</g>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="hover-icon svg-inline--fa fa-circle fa-fw fa-lg" style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon svg-inline--fa fa-circle fa-fw fa-lg"
style="color: var(--white);">
<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" class=""></path>
</svg></div>
<h5 class="margin-top-7xs margin-bottom-0 text-left">spin</h5>
</label></div>
</div>
</form>Text Content
Open Main Menu Font Awesome Font Awesome Start Search Icons Icons Docs Plans Support Podcast Sign In Say hello to Web Awesome, the biggest and best library of open-source web components. Pre-order today! 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 New ANNOUNCING SUBSETTING FOR KITS! Make Font Awesome even faster (and even smaller) with our new subsetting options: auto-subsetting, style selection, and per-icon custom subsetting. Read More About Subsetting Give Subsetting a Try New OFFICIAL FIGMA PLUGIN! New NEW SHARP DUOTONE STYLE! VERSION 6.6.0 33,612 PRO ICONS 68 CATEGORIES 2,050 FREE ICONS ICONS. EASY. DONE. 1 LINE OF CODE… 33,000+ ICONS. Don't download, install, manage, or publish icon files – our Kits CDN does it all for you. Create a free account and get your very own Font Awesome Kit to start your first project. Enter your email to get started for Free! I agree to the Terms of Service, Privacy Policy and Data Processing Agreement. Start for Free YOUR PERSONAL CDN Add our super-simple embed code to your site and have instant access to ALL of Font Awesome. <I CLASS="FA-REGULAR FA-HEART"></I> Place icons on your website with a simple, memorable syntax. And easily change styles when the mood suits you. INSTANT UPDATES Make changes to your icon configuration on the fly without having to touch or push code. AUTO-ACCESSIBILITY & MORE Automate your icons' accessibility, control load timing, ensure Font Awesome Version 4 compatibility, and more. UPLOAD YOUR OWN ICONS Extend Font Awesome with your own custom icons, logos, and even other icon sets to fit your project perfectly. DOWNLOAD Design on the desktop with our Figma component, icon fonts, and SVGs, or grab the files to self-host. THE WEB'S DEFAULT ICON SET, USED ON OVER 200 MILLION SITES Docker Figma Hover Outschool IRS 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. New SHARP SOLID A dash of class for a bold, sharp look. New SHARP REGULAR Sharpen your designs with straightforward icons. New SHARP LIGHT Add a breezy, light touch of modern elegance. New SHARP THIN Capture a clean, razor-sharp, look and feel. DUOTONE SOLID Great for an illustrated feel & grabbing attention. New SHARP DUOTONE SOLID An extra sharp take on the illustrated look of our Duotone icons. BRANDS The easiest way to add social logos to your site. Icon Style Color Size Animate CAMERA-RETRO HAND-WAVE HOUSE-CHIMNEY POO-STORM ROCKET-LAUNCH SPARKLES Classic Duotone Sharp Sharp Duotone SOLID REGULAR LIGHT THIN NONE RED YELLOW TEAL BLUE PURPLE 2XS XS SM NONE LG XL NONE BEAT BOUNCE FLIP SHAKE SPIN <i class="fa-solid 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 10 STYLES QUICK COLOR POWER TRANSFORMS BUILT-IN SIZING ANIMATIONS ROTATE + FLIP EASY LISTS CREATIVE CUSTOMIZATION ADD TO THE AWESOME Never be without an icon you need! Extend Font Awesome with your own custom icons, logos, and even other icon sets to fit your project perfectly. The best part, all icons you add are used just as easily as official ones. Get Pro + Add Your Icons IT'S B.Y.O.I. (BRING YOUR OWN ICONS) Add the icons and symbols your project needs that aren't in Font Awesome… yet. Now with Duotone support! ADD YOUR LOGO Upload your project's logo and use it just as easily as one of our Brand icons. GAME. OTHER SETS. MATCH. Bring in your other favorite icon sets to supplement Font Awesome icons - and use all of them with one easy and familiar syntax. FINE-TUNE ANY ICON With our Icon Wizard, magically add modifiers to any icon to make its meaning crystal ball-clear and perfect for your project. FINE-TUNED FOR PERFORMANCE Light-as-a-feather on Page Loads Reliable Uptime and Loading Global-friendly CDN Network Auto and Custom Subsetting Options THE RIGHT TOOL FOR THE JOB WORKS WHERE YOU WORK Whatever you're working on, we've got a set of tools that work how and where you do. Start for Free Get More with Pro GREAT FOR DEVELOPERS We've got frameworks and toolkits for the most popular plugins and packages that already work the way you expect. Components for JS Frameworks Hosted CDN Options Install via Package Managers Official GraphQL API Easy Management Works with CSS Frameworks GREAT FOR DESIGNERS Use your own designs alongside thousands of matching Font Awesome icons in each of 10 unique styles. Thousands of Icons Upload Your Own Icons Starter Templates Easy Development Hand-off Text-to-Icon Ligatures Figma Component GREAT FOR CONTENT CREATORS With oodles of free icons — including brands + social icons — our syntax is easy to use in authoring tools like WordPress. Multiple Icon Styles Easy Install + Hosting Styling Shortcuts Wordpress Shortcodes Open Source Options Popular Brand Icons 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 FONT AWESOME FREE: ALWAYS FREE From the beginning, Font Awesome has offered free and open source icons. And since we're creator owned and operated, we'll 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 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 33,612 icons in 68 categories across 10 styles + brands. Plus, Actual Human™ tech support, Icon Upload, hosted Pro Kits, Pro npm, the Icon Wizard, and more! Get Font Awesome Pro Font Awesome Font Awesome GO MAKE SOMETHING AWESOME Font Awesome is the internet's icon library and toolkit used by millions of designers, developers, and content creators. Made with love and in Bentonville, Boston, Chicago, Grand Rapids, Joplin, Kansas City, Seattle, Tampa, and Vergennes. PROJECT Download Changelog Commission Icons All Versions COMMUNITY GitHub Icon Requests Twitter Blog Awesome HELP Support Troubleshooting Contact Us Status License Terms of Service Privacy Policy Refunds Cookie Preferences © Fonticons, Inc. COOKIE. COOKIE. COOKIE. We use cookies to make our site work better by storing limited information about your usage of the site. Read more here. Necessary Only Customize Accept All Cookies Closecross-small