Inventory Sale! 75% off most goods in the official Dribbble shop. Pick up your favorites today for a limited time - Discount automatically applied at checkout ✨

close
Shot by #<User:0x0000561fdea98bf8>

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.


301ffd077bbc9a2dc4d2b2c22f265476


✖️ 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 symbols iconset icon icons pack icons icon design iconography

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 ui illustration vector icon

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 web ui web designer web design ui set ui pack ui kit ui icons ui designer ui design ui myicons line icons interface icons icons pack icons design icons icon pack icon design flat icons essential icons

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

✏️ Learn Icon Design in our next Dribbble Workshop on February 25!


✔️ 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.

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

Freebie: Iconly Glass | Dark

by Amirbaqian

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 ux ui ios website illustration branding logo icon

icon set

by Eddie Lobanovskiy

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

Row 1: Aleksey Chizhikov for Icons8, Pixelbuddha, Matt Naylor. Row 2: Mohamed Chahin, Afshin T2Y ⚡️, Anna Raz. Row 3: Ted Kulakevich for unfold , Myicons✨, Nick Botner.


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


Previous
Next