Add some whizbang to your Font Awesome icons!

No dark-mode styles — this email renders the same in a dark client.

Hey there!

We're back to help you use more icons in your project — even if you're just getting started. In this step, you’ll learn how to find the perfect icon, change its style, and add a bit of fun with size, color, and animation.

## Find the Perfect Icon

Last time, we added the thumbs-up icon. Chances are, you want more icons — like ones for shopping, users, or navigation maybe? Our icon search (https://fontawesome.com/search?medium=email&src=fa-app&series=onboarding&topic=2-add-styling) makes it easy to find what you need.

When you find an icon you like, click it to see the details. Then just copy the little code snippet and paste it into your HTML. That’s all you need to display the icon on your website or app.

## Change the Style of an Icon

Font Awesome icons come in different styles, like Solid and Regular. To change how an icon looks, you just change one word in the code — from fa-solid here:

class="fa-solid fa-circle-user"

to fa-regular here:

class="fa-regular fa-circle-user"

Solid icons look bolder and work well at small sizes. Regular icons are more lightweight. You can even use different styles to show different states — for example, Solid for “on” and Regular for “off.”

## Make Icons Bigger, Brighter, or Animated

Want to make your icons pop? You can change their size (https://docs.fontawesome.com/web/style/size?medium=email&src=fa-app&series=onboarding&topic=2-add-styling), color (https://docs.fontawesome.com/web/style/basics?medium=email&src=fa-app&series=onboarding&topic=2-add-styling), or even add animation (https://docs.fontawesome.com/web/style/animate?medium=email&src=fa-app&series=onboarding&topic=2-add-styling) — all with a few simple tweaks.

To make an icon bigger, just add a class like fa-2x, fa-3x, or even fa-5x:

class="fa-solid fa-thumbs-up fa-5x"

That fa-5x makes the icon five times larger than the text around it.

To change the color, use a style like this:

class="fa-regular fa-thumbs-up fa-xl" style="color: #63E6BE;"

You can use any valid CSS color — by name, HEX code, HSL...

Want to bring your icon to life? Try adding an animation class like fa-beat:

class="fa-solid fa-heart fa-xl fa-beat" style="color: #63E6BE"

Need a visual walk-through? Check out our example on CodePen (https://codepen.io/fontawesome/pen/LEpqerE) or watch our YouTube video on Styling. (https://docs.fontawesome.com/web/style/?medium=email&src=fa-app&series=onboarding&topic=2-add-styling)

Now that you’ve got more icon tricks up your sleeve, go make something awesome!

— The Font Awesome Magicians

P.S. Did you know you can get thousands more icons with a Pro subscription? Add icons for charts, brands, UI, and more — like fa-rocket-launch or fa-sparkles. Get Font Awesome Pro (https://fontawesome.com/plans/pro?medium=email&src=fa-app&series=onboarding&topic=2-add-styling)

307 S. Main St., Suite 202, Bentonville, AR 72712, USA
Copyright © 2025 Fonticons, Inc.

You are subscribed to Font Awesome education emails. Unsubscribe (https://fontawesome.com/email/preferences/?medium=email&src=fa-app&series=onboarding&topic=2-add-styling&token=7fa31d3a-d25f-403a-9146-4d4c1e021c6f)

Accession

nse/fontawesome/2026-09-03/422

From

Font Awesome Education · education@m.fontawesome.com

Sent

3 September 2026 · 15:00 UTC