Icon Styles & Designs

When planning for icon style guide, consider where it will be used and what it should represent. Decide which icons require a metaphor and which are just real-world objects. Think about proper metaphors and brainstorm on the possible symbols. Write down all the associations you have to depict the essence of an icon in the best way. Use dictionaries and word sets to find keywords, synonyms, and definitions of the concept you need to represent in an icon. Simplify the idea to the point you will find an object that translates the idea of abstract concepts clearly.

Conduct thorough research to collect the necessary references. Probably somebody has already designed the great version of icons for the needed theme and you could find some inspiration.

Choose an icon style:

Outline, glyph, colored and flat. outline, glyph, colored and flat. outlined, flat, material, glyph, hand-drawn, etc. Take into consideration the interface your icons will be used in. The choice depends on both general requirements for this type of interfaces (for example, iOS or Material) and the stylistic concept of a particular UI layout.

• Sketch your ideas in a chosen style to see if it works just the right way.
• Keep consistency across the whole set.
• Vectorize the best sketches.
• Test the icons in the UI layout and enjoy.

To start with you can choose from 4 basic style of icons and create a styleguide first. Here are those 4 basic styles for icons:

Outline Icon Style:
Also commonly called lined icons, outline icons are clean, modern and most commonly designed in monochromatic fashion with thin, smooth strokes. Made iconic by Apple’s iOS, the outline style is a staple in modern icon design.

Glyph Icon Style:
It’s also often called monochromatic style, focus on simple shapes and smooth curves for quick and easy object recognition. Google uses the glyph icon style as their base for their Material style, which spans a number of their products including Android OS.

Colored Icon Style:
Colored icons, also known as filled outline, are the colored counterpart of outline icons. In short, splash some pigment on an outline icon and you have achieved the monumental status of a colored icon.

Flat Icon Style:
Flat icons are the colored counterpart of glyph icons and are known for their subtle use of highlight and shadow. This lack of contrast is what gives this popular icon style the name ‘flat’, shocking no?

And these are some of the sub-style for icons derived from 4 main icons styles:

Doodle, Hand drawn, Sketch, To a lesser degree Cartoon. This icon style is organic, approachable and sure to lighten up an otherwise somber design.

The badge icon style is perhaps one of the most decorated icon styles that has seen plenty of winning fights in the designer ring. However, badge icons seem to conjure up thoughts of textures, stitching and other frilly things which was so 2010.

Owing its name to having a round, hexagonal or otherwise geometric and often monochromatic background, badge icons are typically illustrated in flat or outline style often with a portion of the foreground protruding outside the border.

Currently this icon style is one of our favorites. Finding itself halfway between an icon and a full illustration, the scenic icon style maintains a single subject in the foreground with a relevant but muted scene as its background.

Scenic icons are quite versatile being able to be placed in relatively small or more open spaces while bringing the wow factor to the next level. They are great for empty application pages where a user has yet to add content, for instructional graphics or websites and have the benefit of being faster to create than full illustrations.

Most commonly a variation of the flat-badge icon style with a somewhat odd and overly dominating hard shadow falling to the bottom right of the subject down to the edge of an almost unfailing circle or rounded rectangular background. Why did this icon style take off? We blame Google. But who knows who started this trend. What we do know is we’re happy to see it on the decline.

Also known as dual-tone, two-tone icons are usually a variant of colored icons but with a limited two-color palette, often of the same hue but varying in shade, producing a more neutral and subdued effect.

Most commonly designed in square dimensions ranging from 12 to 32 pixels, favicons fall in this category and are used when space is tighter than a spitball in a straw. Gross and yet so cool.

A simple flat icon variation, light and shadow styled icons sport a brighter half and darker half with the contrast forming a noticeable but subtle line splitting the icon into two distinct parts. The contrast line may be horizontal, slanted or sometimes vertical.

Dotted. Dashed. Dotty Dots? The names degenerate as you go on. Regardless, this modified outline style mixes smooth strokes with, you guessed it, dots or dashes, in the most strategic of spots.

What started out as the outline style back in the 1960s as young artists everywhere took to their Sketches in the back seats of their parents GM B Platforms quickly turned to the incomplete style. In an age when car suspension left something to be wanted and roads were anything but smooth, the incomplete style came into its own.

Typically a high-fidelity graphic rendering of a real life object that likely took 10 times longer to create than just taking an actual photo. We see no use for such icons; isn’t the point of icons to simplify things? We recommend taking a photo if you need something this picture perfect. Say cheese!

Short for three dimensional (what do you know, you learn something new everyday), the 3D icon style is only used these days by firms who didn’t get the memo the web moved on 15 years ago. Similar to photorealistic but slightly less real, the 3D style uses light and shadow usually with an elevated side perspective to create more depth.

Minis, sometimes just called simple outline or simple glyphs, are basic in nature and strive to convey meaning at the literal pixel level.

These are type of icons that are soft in nature, soft edges, soft colors, soft curves and soft shadows (if added). These are fun, playful and cute icons. All time favorites for millennials and gen Z’s

Go unleash your creativity, Design Happiness!

Thanks for reading!