Email Icons: Our Guide to Brand Inspiration and Best Practices

Email icons may be small in size, but they’re big in importance—they’re powerful little storytelling tools!

When it comes to the limited space in an email, visual cues like icons go a long way. Well-executed icons can help showcase a product or service (that may not be easy to photograph), make complex messages easier to understand, and convey conceptual or abstract messages quickly.

Here’s your guide to why and how to use icons in email, plus inspiration from brands doing it best and design best practices for creating your own. We’ll also wrap up our post with a list of resources for finding free, ready-made icons. Keep reading for all you need to know about icons in email.

Email icons: What are they good for?

What value do icons really bring to email? Here’s what we think icons can do for you:

  1. Get eyes on your message. Ever get bored of reading and just looked at the pictures instead? We’ve all been there. And as email designers and marketers, you already know that visual content is king. When placed alongside text, icons shout out “Look at me!” to get your readers’ eyes on important information.
  2. Communicate quicker and better. The human brain processes visual information quickly, so icons help readers absorb information faster. Use them to bring to life your business’s processes, services, or features in a way that helps readers “get it” more quickly.
  3. Delight readers! Icons are an opportunity to have a little fun in an email.

Inspiration: Beautiful email icons in action

Scrolling through our inbox, it didn’t take long to uncover great examples of email icons. To inspire you, here’s a roundup of some of our favorites.

1. DryBar

DryBar‘s icons are playful and cheerful, with an on-brand outside-the-lines, watercolor effect. This email has no photography, so the icons go a long way in adding interest to the message.

drybar email icons

2. SitePoint

Check out the super simple line drawings that accompany the ANYTHING / FOREVER / EXPANDING brand values at the bottom of this SitePoint email. There isn’t a single extraneous element—no extra colors, lines, shadows, or flourishes—yet they communicate the concepts they represent efficiently and successfully.

sitepoint email icons

3. Evernote

Evernote‘s icons are some of the more complex ones we spotted. Still, with the simple color scheme and consistent shading, they work, even at a small size. (This email scales beautifully on mobile with responsive design, too).

evernote email icons

4. Grammarly

The icons in this Grammarly email steal the show—they’re pretty much the only visual element. We love how they’re used right at the opening in lieu of a single hero image.

grammarly email icons

5. Redbook

The flat design Redbook Magazine used for these icons is a reliable approach for communicating on a small scale. The numbers unify the collection, while the orange carrot in #4 is a great example of when an exception to the color scheme is okay when an illustration calls for it.

redbook email icons

6. ClassPass

No one said icons had to be tiny all of the time. ClassPass bridges the gap between icons and spot illustrations with beautiful simple line illustrations that make this email totally stand out.classpass email icons

 


Best practices for designing email icons

Feeling inspired? We hope so! Here are our recommendations for designing your own email icons.

  1. Strip away unnecessary details and embellishments. Ever heard the wise advice to take off one piece of jewelry before leaving the house? Follow this “rule” for icon design, too. This means, after designing your first draft of an icon, go back and see what you can take away. Effective icons are extremely simple and elegant. Your eyes should be able to register instantly what something is (so don’t go too simple), but they don’t need to spend extra time deciphering details.
  2. Simplify your color scheme. Most brands stick to two or three colors. Be sure to check how your icons will look against different colors, including both light and dark backgrounds.
  3. Don’t include text within the icon. Icons typically sit alongside text. Including text in the icon itself is asking for trouble when the illustration needs to scale. Don’t make readers squint; keep text outside your icons. (An except could be a single letter, like the “P” in the Pinterest icon, for instance.)
  4. Have context awareness. This means you should research the already-vast universe of iconography and be intimately familiar with your visual brand identity.
  5. Be consistent. Maintain consistency within the set of icons you’re creating. Consider line widths, colors, shadows, and angles. Your icons should be part of the same family, and instantly recognizable as such.

Hungry for more granular iconography insight? We highly recommend this in-depth guide to better icon design from Smashing Magazine.

Free icons: Where to find ready-made icons

When it comes to icons, you don’t need to reinvent the wheel often. There are hundreds and hundreds of ready-made icon families available for your use. As you evaluate which ones might work for you, use the best practices above to choose one what’s visually strong and what best suits your brand needs. Here’s where to go for excellent resources:

  1. Free Icons for Product Design (InVision)
  2. Free Icons: 49 Best Sites to Find Beautiful and Useful Free Icons (Canva)
  3. 40 Sets of Free Icons (Creative Bloq)
  4. 8 Sites to Help You Get Awesome Icons for Your Email Marketing Campaigns (Campaign Monitor)
  5. 99 Freebies to Help You Build Awesome Websites (SkillCrush)

Spruce up your email icon design and go Pro!

Gather up your new beautiful icons and create an equally beautiful email in our easy-to-use, drag-n-drop BEE editor. You can even watch our video tutorial on how to customize social media icons in BEE. No HTML knowledge is required. Your email will be mobile responsive, and your icons will shine. Sign up for a BEE Pro free trial!

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor