6 Core Characteristics of Superb Icon Design

6 Core Characteristics of Superb Icon Design

Creative design work (or any design work for that matter) is always a struggle. Icons are no exception to the rule, and can give grief to the most professional of designers. To help you with your icon woes, I’ve put together a few core characteristics of superb icons that I’ve encountered and experienced in my time. So, without further ado, here are some characteristics of superb icon design.

Simplicity

Simplicity is an important part of any design work. This is doubly true for icon design, because you’re given such little space to work in. So, a great way to create a workable, effective icon is to stick with the golden rule of simplicity. Keep it simple, clean, and effective. Evaluate every piece and decide whether it really needs to be there. Would the icon be stronger without it? You’d be surprised how often this happens to be true.

Simplicity is also extremely important for an icon’s ability to match in with other designs. Icons are often featured with other icons, designs, shapes, colors, etc. This means that they need the ability to blend in, so they don’t stand out like a sore thumb. Not to mention too many icons that aren’t simplistic in nature can really clutter up a perfectly good screen. So, stick to simplicity. This will help add clarity and understanding to your icon.

Clarity

All icons should be understandable in a single glance. As a matter of fact, that is the whole point of icons – to be representative of a product or program. So, aim for clarity in your icon design. If it doesn’t have direct representation of the underlying product, in a quick and understandable fashion, it needs to at least spark some recognition of an idea or concept. Clarity helps recognition, which helps memorability, which helps your icon. So, practice clarity for creative icon designs that packs a punch.

Appropriate

Many great creative icons have fallen flat simply for a lack of appropriateness. And I don’t mean in any kind of morality sense (although that too is obviously important), but rather in the target audience and program. No matter how great the icons are, if they’re not appropriate to the subject matter they just don’t work. Always keep in mind your goal while designing your icon, and objectively monitor your success. Sometimes, it’s necessary to start from scratch from a different angle to accomplish your goal and stay true to the task.

Scaling

This is a common issue in icons, due to their sometime use of vectors and their inability to scale down as low as some icons require. It is extremely important that icons look professional in any shape, size, and setting. No matter how amazing the icon is, if elements of it are fuzzy, or it looks bad in a certain scale, it’s not a superb icon.

Consistency

All icons need to be consistent throughout their use of color, lighting, and reflections.  If this isn’t done properly, so much quality is lost it’s absurd. It is one of the easiest ways to give your icons that slightly off feeling, which can lead to general unhappiness, both for the designer and client.

This can be surprisingly hard to spot without a trained eye, but as soon as it is fixed everything suddenly looks ten times better. Our subconscious knows if these things aren’t right, and will let our brains know, even if we can’t vocalize why the icon looks so terrible. So, make sure you’ve ironed out the consistency in your icon, or be prepared to have a subpar design work.

Unique

Although it often goes without saying, it bears repeating. Make your icon unique and interesting. While relevance typically your first priority, an interesting and unique icon can be the difference between a workable icon and a superb icon.

Don’t be afraid to experiment. At the end of the day that’s what all design is. Some things work, and some don’t, but you have to be able to follow your instincts and creative senses. Keep your icons simple, clear, appropriate, properly scaled, consistent, and unique and you’re one the right path. Because the majority of all superb icon designs contain these very same core characteristics.

I hope this short list helped you better understand icon design. Are there any key points or further questions you’d like to hear about? Leave a comment below and I’d love to answer!

 

Social Media Icons – Available for free download

Somacro: 27 300DPI Social Media Icons by vervex

Somacro: 27 300DPI Social Media Icons by vervex

Somicro: 27 Social Media Icons by vervex

Somicro: 27 Social Media Icons by vervex

Simplito: A free social icon set

Simplito: A free social icon set

Free Stained and Faded Social Media Icons Vol 2

Free Stained and Faded Social Media Icons Vol 2

Socializic, free detailed social media icons

Socializic, free detailed social media icons

Candy media icons by TIT0

Candy media icons by TIT0

Social Icons for WPZoom by umar123

Social Icons for WPZoom by umar123

Socialize Icon Set

Socialize Icon Set

Buddycons – Vector Social Media Icons

Buddycons – Vector Social Media Icons

Social Bookmarks/Networking Icon Set

Social Bookmarks/Networking Icon Set

IC Minimal Icon Set by design deck

IC Minimal Icon Set by design deck

IC Colour Icon Set by design deck

IC Colour Icon Set by design deck

FREE Google Plus Icons by survivorcz

FREE Google Plus Icons by survivorcz

Large Updated Twitter Icons

Large Updated Twitter Icons

Twitter Speech Bubble Icons (PSD)

Twitter Speech Bubble Icons (PSD)

Twitter & Dribbble Icons (PSD)

Twitter & Dribbble Icons (PSD)

custom share buttons by JanSzpakowski

custom share buttons by JanSzpakowski

Heart v2: Free Social Iconset in Heart Shape

Heart v2: Free Social Iconset in Heart Shape

Google+ Icons – Available for free download

Google+ Icons

Google+ Icons

Google+ by Alex Patrascu

Google+ by Alex Patrascu

Google Plus (+) Icon Set PNG (dpp)

Google Plus (+) Icon Set PNG (dpp)

Google Plus(+) Circular Icon Set (PSD + PNG) | Taiyab Raja

Google Plus(+) Circular Icon Set (PSD + PNG) | Taiyab Raja

Google+ Logo by Swissendo

Google+ Logo by Swissendo

+plus+ by 1A-Design

+plus+ by 1A-Design

Google Plus Icons by 1A-Design

Google Plus Icons by 1A-Design

Google plus icons by Iconshock

Google plus icons by Iconshock

Google+ Icon by Aaron Moody

Google+ Icon by Aaron Moody

Google Plus + Icons Free PSD by Jimmybjorkman

Google Plus + Icons Free PSD by Jimmybjorkman

Sleek Google+ Icon (Plus Free Google+ Icon Set Download) | PSDFan

Sleek Google+ Icon (Plus Free Google+ Icon Set Download) | PSDFan

Google Connect! by Will Flagello

Google Connect! by Will Flagello

Google+ Icons by Chrisringeisen

Google+ Icons by Chrisringeisen

Google+ by Gabe Telepak

Google+ by Gabe Telepak

Google Plus by Matthew Martin

Google Plus by Matthew Martin

Google Plus Icons by Matt Sellers

Google Plus Icons by Matt Sellers

Google+ Icon by Sandeep Prabhakaran

Google+ Icon by Sandeep Prabhakaran

Google+ PSD Icons by Corbin Marc Hesse

Google+ PSD Icons by Corbin Marc Hesse

Google+ Icons by Daniel Sandvik

Google+ Icons by Daniel Sandvik

Sexy Round Google Plus Icons PSD

Sexy Round Google Plus Icons PSD

Google Plus(+) Circular Icon Set

Google Plus(+) Circular Icon Set

Free Google Plus Icon | Maze of Minds

Free Google Plus Icon | Maze of Minds

Free Google Plus Icons

Free Google Plus Icons

Google Plus Icon

Google Plus Icon

Google icons

Google icons

General Icons – Available for free download

iConPack - now with psd by 7UR on deviantART

iConPack – now with psd by 7UR on deviantART

 

Web Icon Set - Mobile Icon Set

Web Icon Set – Mobile Icon Set

Web Icon Set - Cute Blogging Icon Set

Web Icon Set – Cute Blogging Icon Set

Web Icon Set - E-Commerce Icon Set

Web Icon Set – E-Commerce Icon Set

Music icon pack

Music icon pack

micrOS icon pack

micrOS icon pack

app-bits : iPhone Toolbar Icon Set : iPhone Toolbar Icon Set

app-bits : iPhone Toolbar Icon Set : iPhone Toolbar Icon Set

3D Cartoon Icons Pack by deleket on deviantART

3D Cartoon Icons Pack by deleket on deviantART

NIXUS Icon Pack: 60 Beautiful Premium Icons (Free) | Tutorial9

NIXUS Icon Pack: 60 Beautiful Premium Icons (Free) | Tutorial9

55 free user icons pixel by pixel icons

55 free user icons pixel by pixel icons

108 Mono Icons: Huge Set of Minimal Icons | Tutorial9

108 Mono Icons: Huge Set of Minimal Icons | Tutorial9

Juicy Fruit icon set. psd included

Juicy Fruit icon set. psd included

Web Icon Set - Application Icon Set

Web Icon Set – Application Icon Set

Exclusive Payment Method Icon Set for our readers - Speckyboy Design Magazine

Exclusive Payment Method Icon Set for our readers – Speckyboy Design Magazine

Freebie: Incredibly Detailed 3D Icon Set | MediaLoot

Freebie: Incredibly Detailed 3D Icon Set | MediaLoot

Free SEO Icons Set (16 Icons, Private Use Only) - Noupe

Free SEO Icons Set (16 Icons, Private Use Only) – Noupe

Women's Day Icons | Cute Little Factory

Women’s Day Icons | Cute Little Factory

Free Apple iPad Icon Set for Your Website Designs

Free Apple iPad Icon Set for Your Website Designs

mac 3D icon set by LeMex on deviantART

mac 3D icon set by LeMex on deviantART

Soda Pop Caps Icons | Cute Little Factory

Soda Pop Caps Icons | Cute Little Factory

 

This post is brought to you by Printrunner, an online printing company that offers custom label printing.

Posted in Icons

Written by Adam Farwell

Adam Farwell is an online publisher for custom design t shirt printer www.bluecotton.com. He enjoys blogging about design, marketing, and creative projects

  4Comments

  1. Rodleg   •  

    really amazing selection, thanks !

  2. steff   •  

    everybody needs/loves/creates icons… very nice collection. thanks :D

  3. Maneet Puri   •  

    Really nice post Adam! However, to me simplicity will always be a priority as I prefer staying on a safer side when it comes to designs, even though business is all about taking risks :)
    Even renowned brands prefer simplicity when it comes to icons depicting their brands!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>