fontawesome.com Open in urlscan Pro
104.18.23.52  Public Scan

Form analysis
2 forms found in the DOM

Name: header_search — POST

<form method="post" name="header_search"><label for="header_search_query" class="sr-only">Search Icons:</label>
  <div class="relative white"><input id="header_search_query" type="search" name="header_search_query" value="" placeholder="Search icons..."
      class="input-reset color-inherit input-focus all-animate br-pill ph4 sans-serif fw6 header-search-input ba bw1 bg-white-10 b--transparent"> <button type="submit" name="header_search_submit"
      class="button-reset color-inherit db o-80 absolute center-v right-1 glow hover-orange8"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
        class="svg-inline--fa fa-search fa-w-16 fa-fw">
        <path fill="currentColor"
          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
          class=""></path>
      </svg> <span class="sr-only">Search!</span></button></div> <button type="submit" name="header_search_submit" class="sr-only">Search!</button>
</form>

Name: demo_icon_chooser — POST

<form id="demo_icon_chooser" name="demo_icon_chooser" action="" method="post" class="flex flex-column justify-center w-50-ns w-40-l order-2 order-1-ns f4 bg-gray1 pa5 relative">
  <div class="mb3"><input id="demo_icon_chooser_truck-monster" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="truck-monster"> <label for="demo_icon_chooser_truck-monster"
      class="flex flex-row items-center pointer"><span class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">truck-monster</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_space-shuttle" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="space-shuttle"> <label for="demo_icon_chooser_space-shuttle"
      class="flex flex-row items-center pointer"><span class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">space-shuttle</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_dove" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="dove"> <label for="demo_icon_chooser_dove" class="flex flex-row items-center pointer"><span
        class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">dove</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_user-astronaut" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="user-astronaut"> <label for="demo_icon_chooser_user-astronaut"
      class="flex flex-row items-center pointer"><span class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">user-astronaut</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_quidditch" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="quidditch"> <label for="demo_icon_chooser_quidditch" class="flex flex-row items-center pointer"><span
        class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">quidditch</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_coffee" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="coffee"> <label for="demo_icon_chooser_coffee" class="flex flex-row items-center pointer"><span
        class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">coffee</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_beer" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="beer"> <label for="demo_icon_chooser_beer" class="flex flex-row items-center pointer"><span
        class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">beer</span></label></div>
  <div class="mb3"><input id="demo_icon_chooser_skull" name="demo_icon_chooser_choice" type="radio" class="sr-only input-radio-custom" value="skull"> <label for="demo_icon_chooser_skull" class="flex flex-row items-center pointer"><span
        class="relative"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dot-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          class="checked-icon primary6 svg-inline--fa fa-dot-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" class=""></path>
        </svg> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="unchecked-icon gray4 svg-inline--fa fa-circle fa-w-16 fa-fw fa-lg">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path>
        </svg></span> <span class="fw6 ml2">skull</span></label></div> <button id="demo_icon_chooser_submit" type="submit" name="demo_icon_chooser_submit" class="sr-only">Choose Icon + Update Demo</button>
</form>

Text Content

Home Start Icons Docs for Web Docs for Desktop Plans Blog Support Sign In


YOU'RE SIGNED IN AS

Account Details Font Awesome CDN Download Support Sign Out
Search Icons:
Search!
Search!
Start Icons Docs Support Plans Blog
Sign In Sign In


READY TO POUR… THE FONT AWESOME 6 BETA!

The next generation of the web’s favorite icon library + toolkit is now
available as a Beta release! Try out the Free version. Subscribe to Font Awesome
Pro to get even more!

Explore the Icons
Learn More!
Got it! Collapse this!
FONT AWESOME

Get vector icons and social logos on your website with Font Awesome, the web's
most popular icon set and toolkit.

Start for Free Get More with Pro
 * Version 5.15.4
 * 1,608 Free Icons
 * 7,864 Pro Icons
 * Download



Font Awesome is one of the top open source projects on GitHub.



UPLOAD YOUR OWN ICONS!

Upload your own icons to a Font Awesome kit and easily use them right alongside
(or as a replacement for) official Font Awesome icons!

 * Easily add and use your own logo just like an official brand icon.
 * Bring other sets and even icons you've designed yourself to the party.
 * Style, size, color, and even power transform your icons just like Font
   Awesome icons.

Get a Pro-level Plan to Upload!

This feature is available on Kits with a Pro-level plan.


INTRODUCING DUOTONE ICONS

Add another layer to your designs with our new duotone icons, available as part
of Font Awesome Pro. These beautiful icons work out-of-the-box by inheriting
your project’s base color, or customize them however you’d like.

Dark on Light
Light on Dark
Monochromatic
Pink and Yellow
Green and Black
Font Awesome 6
Duotone or Do Not. There is No Try
laugh-wink icon in duotone style crow icon in duotone style file-certificate
icon in duotone style
french-fries icon in duotone style plane icon in duotone style sparkles icon in
duotone style
horse with a saddle icon in duotone style turntable icon in duotone style
photo-video icon in duotone style
Duotone or Do Not - There is No Try


PROFESSIONALLY DESIGNED + PIXEL-PERFECT

Each and every symbol is designed from scratch against guidelines and standards
forged from years of experience of illustrating and designing icons. The result
is a consistent look and feel that spans thousands of icons across four unique
styles – with more coming in v6.

See All 7,864 Icons
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

See All 7,864 Icons


NEAR-INFINITE ICONS

Font Awesome has grown to 7,864 icons and continues to add the most popular and
needed icons – with even more coming in Version 6. Stop hunting down missing
icons you need, combining from multiple sets, or finding that company's official
logo in a dirty corner of the internet.

See All 70+ Categories
 * COVID-19 New!
 * Sci-Fi New!
 * Space New!
 * Household New!
 * Sports
 * Autumn
 * Vehicles
 * Design
 * Users
 * Travel
 * Emoji
 * Objects
 * Medical
 * Religion
 * Hands
 * Food
 * Music
 * Brands

See All 70+ Categories


PLAY WITH OUR ICONS

Our icons are easy to use on the web out of the box. And that box includes
support styling to help you size, place, style, and even animate any icon. See
what you can do with one line of our easy to remember code.

Start Using In Your Project
Icon Style Size Color Rotate + Animate
truck-monster
space-shuttle
dove
user-astronaut
quidditch
coffee
beer
skull
Choose Icon + Update Demo

<i class="fas fa-truck-monster fa-null " style="color: #;"></i>
AAAAAAAA
Start Using In Your Project


FONT AWESOME WORKS HOW AND WHERE YOU NEED IT TO

like with your favorite apps and toolsets… Web Fonts + CSS SVG + JS Sketch Figma
Vue.js Angular React Ember


 * ACCESSIBILITY-MINDED
   
   Font Awesome loves screen readers! With our auto-accessibility feature, it’s
   super simple to do the right thing for your users.


 * DESKTOP-FRIENDLY
   
   Font Awesome is fantastic to work with on the desktop, especially with
   all-new ligatures. Try it in your next design or presentation!


 * TRIED & TESTED
   
   We've stress-tested them, so that your icons and styling work and display
   perfectly in all modern browsers.


 * PIXEL-PERFECT RENDERING
   
   Our icons are meticulously designed on a grid that helps them render
   perfectly and makes them legible at any pixel or font-size.


 * BASIC STYLING INCLUDED
   
   Size your icons in relation to your UI. rotate, align, mirror, pull and stack
   them with ease too thanks to our bundled styling.


 * POWER TRANSFORMS
   
   Go further - Shrink, grow, and rotate your icons on a granular scale. Layer
   or mask multiple icons together with pinpoint accuracy. Or make quick work of
   counters and badges.


 * MANAGE & USE YOUR WAY
   
   Use Font Awesome how you want: via our CDN, Download Font Awesome to host
   yourself, or install the latest via npm. We've got component packages and
   CSS-processors too.


 * WITH WAY MORE ON THE WAY!
   
   We're not done yet. Native app support, more category packs, sharp icons, and
   more are in the hopper with Version 6.

Get more icons, styles, tools, & tech support.
Upgrade to Font Awesome Pro!

Get More with Pro


LOOKING FOR VERSION 4?

Version 4 is still available. We’ve also made it easy as pie to upgrade to
Version 5.

Version 4 Files + Docs


CHECK OUT OUR RECORD-SETTING KICKSTARTER.

Thanks to over 35,000 backers, we redesigned and rebuilt Font Awesome from
scratch.


WHAT'S NEW + ON THE HORIZON?

Stay up-to-date with all of the new Awesome being released and what we've got
coming shortly.

See What's New

Font Awesome is the web’s default icon set, and has been used on over 100
Million websites, including:

 * TV Guide
 * McDonalds
 * Merriam Webster
 * Fitbit
 * NBC News
 * Yale University


PROJECT

Latest Release Version 6 Beta JavaScript API GraphQL API License GitHub Project
Old Version 4.7


ICONS

Gallery Cheatsheet Requests Leaderboard Request an Icon


SUPPORT

Troubleshooting Common Questions Report a Bug Get Help


COMPANY

Blog Status Contact Us @fontawesome

Made with love & coffee in Bentonville, Boston, Joplin, Seattle, and Vergennes.

© Fonticons, Inc.

Terms and Privacy




Closecross-small