Font Awesome

Add a Touch of Class with Font Awesome Sharp Icons

by Noah Jacobus

Well hello, Mr. Fancy Pants.

Rubber chickens and squirting flowers are great accessories for lots of occasions — just not a black tie event. And so it is with design. It’s true that Font Awesome is known for the whimsical and zany, but sometimes you need an icon family that captures a more formal tone. That’s why we built Font Awesome Sharp!

*Laser security grid not pictured

Font Awesome Sharp: Cut From the Same Cloth But with a Touch of Class

Our work on Sharp actually began by taking stock of what makes Font Awesome Classic, well, awesome. What are its stylistic hallmarks? What’s the glue that holds all 15,000+ icons together in a happy bunch? Once we nailed down some specifics, we knew what to tweak to make something crispier yet still familiar.

Spot the differences

Some glyphs lend themselves better to sharpened points; while others were beveled to preserve visual density, or to fit without icon boundaries.

To point or to bevel? That is the question.

This is all well and good when cherry-picking a handful of icons to test. But what do you do when your icon is a circle? Circles are pretty famously… pointless. There’s a lot we can do to add sharpness to an icon‘s form, but we quickly nixed doing so at the expense of an icon’s ability to communicate its “true self.” If we sharpen something and now you can’t tell what the icon is (or doesn’t match its name!), then we have a problem.

We changed a lot of small things on more commonly-circular forms, like flattening out clouds and adding spiky spices to the bagel.

There are a lot of choices to make when you’re remaking 15,000+ icons — decisions you make for icon #3 might not hold true anymore when you get to icon #3,000. So we did what you used to on leftover night growing up: throw everything into a big pot, stir it up, and see how it tastes. Performing a pass like this adds a good chunk of time onto production, but it’s vital for quality and cohesion across the entire Sharp family. Plus, it’ll make things much easier when we move on to the remaining styles!

A small cross-section of our Sharp Solid test file

Thankfully, we can head off a lot of future problems at the pass by using and maintaining all our modifier components in Figma.

And this is just the start! Keep a sharp eye out for Regular, Light, Thin, and Duotone, which are all coming soon.

If You Use Font Awesome Icons, You Already Know How to Use Sharp Solid

If you’re insecure about slipping into a new icon family, don’t be! We all put our pants on one leg at a time — whether lederhosen or fancy tux pants with the weird shiny strip down the side leg. 

The point is, you can dress up your project with Sharp the same way you would the other styles you’re already used to. Whether you use web fonts, our svgs, or Kits, Sharp icons just work — and fit like a glove.   

Let’s say you’re building a website using Font Awesome Pro’s Solid style. Simply update your code to reference the Sharp icons instead. The new icons inherit your existing base color automatically. That’s all there is to it.

 <!-- A Font Awesome Classic Icon -->

<i class="fa-solid fa-hand"></i> 
 <!-- A specifically set Font Awesome Sharp Solid Icon -->

<i class="fa-sharp fa-solid fa-hand"></i> 

Simply add fa-sharp before your style declaration, and you’re good to go. (Only the Solid style of Sharp is currently available, but the pattern will remain the same when Sharp Regular, Light, Thin, and Duotone are introduced.)

To learn more about how to use the new Sharp Family, check out our documentation.

Sharp Icons Are Great for Projects Needing a Buttoned-Up Look

Only those who have achieved Level 6 Laser Lotus ranking can visit the Beyond section.

We love our Classic family, but sometimes a smooth, rounded vibe just isn’t the right fit for your project. As a functional piece of UI, icons should borrow a lot of their substance from other components and pieces that have been fleshed out: colors, cards and buttons, stuff like that. 

But they’re also often paired with typography, so you may want to ensure they can aesthetically bridge between these different pieces. So if you dig into your type’s anatomy and find the letterforms are built on elements of geometric curvatures and sharp terminals, Font Awesome Sharp might be for you!

We’re all just stardust.

Some other ideas of projects where Sharp might be a good fit:

  • Banking & financial tech
  • Construction
  • Furniture & home goods
  • Engineering
  • Government forms
  • Scifi card games
  • …or anything that needs a sense of class and stability

To celebrate the release of Sharp, we’re offering Font Awesome Pro for $79/yr. That’s $20 off the regular price! But you’ll want to subscribe soon because the offer is only available for a limited time! 

Get Font Awesome Pro