Icons are everywhere in web design. When used properly they can really improve a website’s overall design. As I point out frequently, users scan websites, more than they read them. Icons are especially useful in helping users scan a site — they give a visual clue to what the content is about.
While a solid use of icons can help your website stand out, they can also tank the design pretty quickly if used incorrectly. Many web designers use a page builder of some sort (Webflow, Elementor, Divi, etc.), and most of those page builders have an icon library baked in. This can be a really helpful too, but relying too much on this library is a quick way to an amateur web design.
Here are some helpful tips to jazz up your icons so they help your site, not hurt it.
Don’t rely on your page builder’s library of icons.
There are tons of great options on the web and most won’t break the bank. The Noun Project is my all-time favorite resource. It costs $39/year for an unlimited use of royalty-free icons. Plus, they have over 2 million icons in their library so you’ll have plenty of options. When you rely on your page builder’s library the options are very limited and end being quite generic and often over-used.
Customize your Icons with some simple tweaks.
When using line art icons, change portions of the icon to an accent color.
Give it a background color by adding a circle or box behind the icon.
If you’re not sure what program to use to make these customizations, you can use any vector based program (Illustrator and Sketch being the most prominent). And, if you don’t want to fork over the cash for those programs, consider using Figma — its free!
If you’re using a solid color icon, use that throughout the entire site. Don’t mix and match solid icons and line art icons.
Keep the same sizing. If your icons are 40px on your homepage, be sure they are 40px on your inner pages as well.
If you’re using an icon resource similar to The Noun Project, you may need to take some extra steps to ensure your icons are uniform. This is most often an issue with line art icons where one icon has a 1px border and another has a 2px border.
Not all icons are meant for all sizes.
Many icons look best between 30-50px. When you make them larger, they start to look a little funny. Be mindful of your icon’s intended size. If you need to make it bigger, consider adding a background shape to it, so that it will take up more real estate but you don’t have to enlarge the icon.
Be careful with flat icon styles.
They were a huge fad a few years back but they can quickly look dated and make your site look bad. They are a great way to interject some extra color to a site so they can be helpful but I’ve found the ones that still look good often have a darker outline to the icon shapes rather than no border at all.
SVG is a way of maintaining perfectly crisp icons that aren’t pixelated at all. If you’re using a program to tweak or create your icons, export them as SVGs, not PNGs. And, if you’re having a hard time uploading them to a WordPress site, you can install a plugin that will allow the use of SVGs.
Want a deeper dive into this topic? I created a video where I walk through the process of tweak some icons to improve their look so they help your site design and don’t hurt it. You can view it here.