You know you want to add some icons to your website, they look so fun! But when you sit down to actually look for them, it’s a bit overwhelming. What style? Which website? Are there any for free?

There are lots of amazing resources out there that provide icon options (for free!) so that no matter what your brand vibe and style are you can find exactly what you’re looking for! In this post I’ll share some of my favorite icon resources and tips on how to choose and use them on your website.

Before we dig into my favorite icon websites, let’s look at some things you need to consider before choosing your icons

How to Choose Icons That Actually Fit Your Brand

One thing you don’t want to do is forget that you need icons and leave them to the last minute.

You’ll need icons for the social media platforms you use. You can use them in bullet lists so you can create check lists or even don’t lists. Icons can also be a fun way to give a visual representation of the different services you offer. (Check out my custom web design page for an example of both.) They can also visually support your copy and make it more interesting and easy to digest.

You’ll also want to consider what kind of icons fit your brand.

Is your brand soft and feminine? Then you might want to consider icons with thinner lines that are more rounded.

Is your brand more bold and confident? Then you should look at thicker lines or even filled icons that will be more eye-catching.

Do you have a corporate vibe? Then square filled icons will suit your look.

If your brand more fun and playful? Then looking into some fun illustrations and colors could be good for you.

Whichever style you go with be sure that you are consistent with that style across your website.

Here are a few icon mistakes to avoid…

• don’t mix outline and filled icons
• don’t pull icons from a bunch of different sources – try to use the same set across your website.
• don’t switch styles from page to page
• don’t pick icons that don’t match the meaning (Tip: If you’re stuck on matching an icon to your meaning, ask AI)
• don’t forget to check mobile to make sure they look good there too

If you’re not sure what color to use, use your brand’s accent color to really make your icons stand out.

Now let’s look at where you can find icons. You don’t need a ton of different sources. Usually if you can find one good set that is all you need.

Use the Icons You Already Have

Most likely your WordPress theme or builder will already have icons installed. For example, I use Elementor and it comes with 1,500 free Font Awesome 5 icons in their library. These are all really nice and simple to add to your website.

I almost always use these icons for social media and bullet lists.

So before you go hunting on the web check your theme or builder to see if you already have all you need.

If your theme doesn’t provide them or you’d like more variety, here are a few of my favorite icon sources.

Where to Find Icons

Note: please be sure that you read each of these websites terms of use before you download from them.

Canva

It’s no secret that I love Canva! So of course it’s number on my list of favorite places to find icons. You’ll find a huge variety of styles and categories on Canva. Most can be edited to change the colors and you can mix and match them to create something more unique. There are lots of great options with Canva Free and even more on Canva Pro.

The Noun Project

Here is what The Noun Project says about itself, “The world’s largest and most diverse collection of high-quality vector icons and photos. Crafted and curated by real human Creators.”

If representation is important to you as well supporting human artists, The Noun Project is a great place to find quality icons for your website. They also recently released a wonderful Accessibility Icon set that I love!

And the best part their icons are free!

Flaticon

Flaticon is another free website that has lots of great icons as well fun stickers you can use to bring some personality to your site.

Icon Pro Tips

1. Be sure to pick the right file type. Look for SVG files where possible as they stay sharp on all screen sizes. If you can’t get a SVG then a transparent PNG can work too.
2. Also, don’t forget to add ALT TEXT to icons so that screen readers will know what the image is. And if you are using icons as buttons or links be sure to add aria labels to them.

Icons might seem like a small detail, but they can make a big difference in how your website feels. When you choose the right ones, they can make your website stand out and look more like you!

If have no interest in icons or design details like this, that’s ok! That’s what I’m here for and I help my clients with these details all the time. Let’s chat and see how I can help you bring your website to life!