close
Shot by #<User:0x00005efaaedbe608>

Art by Anton Lapko

Mastering Iconography: The 3 Do's & Don'ts of Icon Design

In this guest post, founder of Iconaday Samuel Lee Miller drops by to share the three do’s and don’ts of effective icon design.

Though they can be easily overlooked, icons play a crucial role in design—guiding users, communicating ideas and information, and bringing hierarchy to content—to name a few.

Yet, creating icons in simple, novel ways remains a challenge. While there are many variables to consider, this article outlines a few things to think through in your icon design process.



✖️ DON’T Design icons without research

Conducting research before designing is always important, but with icon creation, it’s crucial. A good practice for this is to not only research symbols visually, but also research words, associations, and other semiotic principles.

Some of the things that you should consider are: the intended meaning or desired action (think about how you hope people will understand the symbol) and how this concept has been represented in the past.

Looking at an icon marketplace like The Noun Project can help you to get a better understanding of how designers have visualized concepts before. You can use this research to discover patterns and inform your design.

health icon set icon icon design iconography icons icons pack iconset symbols

health icon set

by Martin David for ottonova

... was working on some more icons for our website. In coorporation with this awesome guy @andreasstorm ____________ Learn more about German health insurance here: www.ottonova.de

View on Dribbble

✖️ DON’T Change commonly understood icons

Certain symbols are widely-known for a specific meaning. While it may seem interesting, or even fun, to use a dog icon for a veterinary website’s search bar—it could lead to a misunderstanding. At the very least, you’re likely making the user think about something longer than they need to.

Instead, if your task is to convey “search”, think through designing a magnifying glass in a way that ties into the project at-large. Is there a unique angle you can approach the icon from? Does the brand have signature colors, use a specific line weight, or have an exact angle in its logo? You can utilize these key attributes in your design.

Taking this approach helps your icons stay visually interesting and ownable—while retaining the meaning people commonly recognize them for.

Category Icons icon illustration ui vector

Category Icons

by Scott Tusk for Yelp Design

Small sample of some upcoming icons launching in the Yelp app. later in 2020.

View on Dribbble

✖️ DON’T Add unnecessary details

Icons are known for simplicity and the ability to communicate concepts quickly. A person should be able to scan an icon and have a sense of what it’s communicating right away.

When a designer adds too much detail into an icon, it not only can be distracting, but it can also lead to confusion. On the other hand, an icon that doesn’t have enough substance might be hard to understand.

Finding a balance of form and function is important when designing icons.

Finding a balance of form and function is important when designing icons, so be sure to think through what the icon should convey first. Then work through how that can be expressed visually—always using an editing eye and considering what’s the essence of the icon.

Making icons in simple, novel ways is one of the biggest challenges you’ll face in icon design.

Myicons — Interface, Essential, Ui vector line icons pack essential icons flat icons icon design icon pack icons icons design icons pack interface icons line icons myicons ui ui design ui designer ui icons ui kit ui pack ui set web design web designer web ui

Myicons — Interface, Essential, Ui vector line icons pack

by Myicons✨

Interface, Essential, Ui vector line icons. Check out the full line icons pack (5000+ line icons): https://myicons.co 💫 Free update every month / Growing pack ✨PURCHASE: Myicons | CM Like what we do? 🙌 Don't forget to follow us on: Dribbble | I...

View on Dribbble


✔️ DO Keep your icons consistent

Ensuring that your icons look and feel cohesive is one of the challenges you’ll face when designing icons. If there’s visual inconsistencies in your icon library, you run the risk of confusion and hurting your brand’s visual credibility.

While not every icon should look exactly identical, having consistent properties throughout brings icon sets together. No matter what visual element you draw from, establishing guidelines for your icon library ensures consistency and quality.

✏️ The Designer’s Guide to Icon Set Design

Freebie: Iconly Glass | Dark chat dark design essential essential icons flat freebie glass glass icon icon icon design icons icons pack icons set iconset illustraion illustrator minimal ui vector
Shot Link

Freebie: Iconly Glass | Dark

by Amir Baqian

Hi 🤩 Here’s the Iconly glass edition! Available now on the Figma community for free. Also, all icons are fully-customizable. Download now and tell us your feedbacks  ✌️ https://piqo.design/figma ― Follow Me on instagram: Instagram

View on Dribbble

✔️ DO Remember your icon’s context and purpose

Where will your icons be used? Will they be implemented in an app’s interface, on a marketing website, or in print collateral? It’s important to take these things into account before you start designing icons.

Your context can significantly alter how you approach designing icons. A 16px interface icon can, and should, look and feel vastly different than a larger-scale, illustrative brand icon. Keeping your end-goal in mind at the beginning of your project will help you design the icon more effectively.

When used appropriately, icons add intuitiveness to a design—instead of making it more complicated.

Just as it’s important to think through where your icons will be used, it’s also important to consider what you hope to accomplish through the icon—and if using one is the best approach.

Icons, at their best, serve an intentional purpose. If they improve an experience, then by all means, use them freely. However, if they add clutter or confusion, think through other possible design solutions that solve the problem and convey the same principles. When used appropriately, icons add intuitiveness to a design—instead of making it more complicated.

Sometimes using an icon alone isn’t enough to communicate your information. Selectively adding text next to (or near depending on the context) can be essential to helping people easily understand your content. The more ambiguous or complex the concept is, the more likely it is that adding text to explain the icon will help the design. Another way to do this in digital design is by adding a tooltip. This keeps your design compact while also explaining what the icon means.

icon set branding icon illustration ios logo ui ux website

icon set

by Eddie Lobanovskiy for Unfold

hey guys here's an icon set we recently collabed on with team @Unfold

View on Dribbble

✔️ DO Build an icon library in your design system with documented use-cases

As mentioned, your context can drive how your icon looks, but it doesn’t always have the final say.

Mixing icon design styles (mono-line, glyph, etc.) throughout a design system can provide a visual hierarchy in your designs. Just as in typography—if everything is bolded, nothing stands out—so too does that in iconography. If all your icons look too similar, they may not communicate as clearly as possible.

Finding ways to meaningfully incorporate a variety of design styles into your brand’s icon library, with proper documentation, is a worthy pursuit.

Friendly Line Icon Set components design figma icon set iconography icons library set sketch ui
Shot Link

Friendly Line Icon Set

by Eddy Gann

Long time in the making with this one! Inspired by some projects I've done in the past, where I created a few custom icons. I decided to expand out what I had created, and share the collection with the greater design community! As I expand the set, if ...

View on Dribbble


Samuel Lee Miller Samuel Lee Miller is the founder of Iconaday, a community that celebrates icons as the short stories of visual design. Product Designer by day and playlist curator whenever possible, he’s passionate about using design to solve problems and help others.


Icon design ideas

Ready to design your own awesome icons? Get inspired by the visual examples below and find more icon design inspiration on Dribbble. Happy designing!

  1. plumpy icons animals birds design domestic duotone icon icons set minimalistic retro stylized ui ux vector web wild
    Shot Link
  2. Stannum Vector Icons app devices download finance glyph icon icons illustrator media office pack photoshop pixelbuddha png set sketch svg transport vector
  3. Category Icons basketball bb 8 bb8 bbq beach candle dog gaming hammer headphones hiking house iconography icons kitchen plant star wars starwars umbrella xbox
  4. 3D icons b3d blender eco envrionment green icons
  5. Weather icon set - Dark branding dark design flat icon icon set icons set illustration illustrator logo minimal set icon ui vector weather
  6. Icons design icon icon set illustration logo vector
  7. Glass Icons abstract blur branding design glass gradient icon icons icons pack iconset illustration modern simple
  8. Myicons✨ — Hotels vector line icons pack essential icons icon design icon pack icons icons design icons pack interface icons line icons sketch sketchicons ui ui design ui designer ui icons ui kit ui pack ui set web design web designer web ui
  9. System Icons brand icon identity illustration logo system design ui vector

Row 1: Alex Chizh for Icons8, Pixelbuddha, Matt Naylor. Row 2: Mohamed Chahin, Afshin T2Y ✪, Anna Raz. Row 3: Ted Kulakevich , Myicons✨, Nick Botner.


Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next