Many designers and developers use the same two icon styles for all their work, outline and glyph, but there are many more options! Some fresh, others not so much… but here is the designer guide to the 25 most popular icon styles.
4 Iconic Icon Styles
With few exceptions, nearly all icon styles are some variation of the big four styles: outline, glyph, colored and flat. For the Platonic minded, yes, one could argue all icon styles are the children of Mother Outline and Father Glyph, but alas, let’s talk icon styles, not philosophy…
#1 – 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 (wink) by Apple’s iOS, the outline style is a staple in modern icon design. Here’s to you Apple, it’s been a good few years…
#2 – Glyph Icon Style
Borrowing or stealing (we’re not sure which) from the ancient Egyptians and their cryptic hieroglyphics, someone brilliantly came up with the word ‘glyph’ for this timeless, often monochromatic style.
Perhaps ironically (or was it calculated?) glyph icons are rather the opposite of cryptic and instead 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.
Evidently in the not so distant past, glyph-phoria swept the nation possessing designers near and far to start naming their icon websites with some variation of the word glyph. Point in case: glyphicons.com, glyphsearch.com and my personal favorite glyphlab.com, sigh.
#3 – Colored Icon Style
Colored icons, also known as filled outline (or coloured icons for my British mates out there), 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, long live the Queen.
#4 – Flat Icon Style
You guessed it, flat icons are the colored counter part 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?
3 Fresh & Trending Icon Styles
Want your design to uuuooooo and aaawwww your audience? Check out these Vectto certified fresh icon styles to elevate your design. Buckle up nunchaku.
#5 – Doodle Icon Style
Doodle. Hand drawn. Sketch. To a lesser degree Cartoon. Take your pick, we think doodle is the most fun. This icon style is organic, approachable and sure to lighten up an otherwise somber design.
What better way to demonstrate a doodle than a doodle of a poodle? Here’s three posh pampered poodles for your adoration. Ruff.
#6 – Animated GIF Icon Style
Quickly becoming all the rage in email marketing and to a lesser extent on websites, animated icons, usually in gif format, are fresh when animation is looped, movement subtle and placement sparse.
Animated icons can be used in fun creative ways, such as for hover-states, to sparkle up boring ol’ email or to pick up otherwise verbose and interminable copy (news flash! millennials and iGens don’t like to read). Used too much though and it’s the Million Dollar Homepage all over again but worse.
Hey ding-dong! Join Vectto already, it’s free!
#7 – Scenic Icon Style
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.
3 Declining But Sometimes Cool Icon Styles
Not every icon style lives in perpetual glory like Mother Outline and Father Glyph but these declining icon styles when done right still have some fight left in them.
#8 – Badge Icon Style
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.
#9 – Long Shadow Icon Style
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.
#10 – Sticker Icon Style
Wait! What!? Sicker style icons aren’t ‘in’ anymore!? True, this might be more wishful thinking on our part with Messenger and others pushing this style as of late, but let’s be honest, putting a thick white background and a drop shadow on any old icon isn’t innovation, it’s just childish (and yes, a little fun).
8 Icon Style Variants (That Don’t Suck)
These icon styles are subtle plays off the icon styles we have already discussed above, but we think they are pretty cool nonetheless and as time allows, we might even add them to the Vectto library. Let us know which ones you like the most.
#11 – Two-Tone Icon Style
Also know 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.
#12 – Elastic Icon Style
Not overly popular, but rather fresh in their own right, elastic style icons typically bulge, swell or otherwise protrude forward slightly, distorting the subject and lending the perception of movement. This style works particularly well for shiny subjects with bent reflection lines.
#13 – Light & Shadow Icon Style
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.
#14 – Material Icon Style
A product of Google Design, the material icon style uses ‘geometric shapes to visually represent core ideas, capabilities, or topics’. Clean, simple and exacting almost to fault, if your goal is to work at Google you might want to hit the books as this is no style for slumps.
#15 – Mini Icon Style
Minis, sometimes just called simple outline or simple glyphs, are basic in nature and strive to convey meaning at the literal pixel level. 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.
#16 – Gradient Icon Style
Borderline not a separate icon style but nonetheless, gradient icons (sometimes called Nolan icons, neon icons or glowing icons) are really just outline style icons dressed in royal blue on top grading down to an almost glowing fuchsia/fandango at bottom. I’m not sure about you but all I can think about is neon bowling. Strike!
#17 – Incomplete Icon Style
What started out as the outline style back in the 1960s as young artists everywhere took to their Etch A Skeches 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. Thank you dear pothole.
#18 – Dotted Icon Icon
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. Mind. Blown.
3 Old School Icon Styles (That Do Suck)
Sorry, but you really shouldn’t be designing with these anymore. If you do, we will laugh, point and make jokes about you. Really, we will. Disagree? Complain in the comment section below (oh wait, we don’t have one of those, darn).
#19 – Photorealistic Icon Style
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!
#20 – 3D Icon Style
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. Smilar to photorealistic but slightly less real, the 3D style uses light and shadow usually with an elevated side perspective to create more depth.
#21 – Pixel Icon Style
Apparently a few rouge programmers from Mojang decided to give icon designing a go and rather anticlimactically we ended up with the pixel style. Outside of minecraft.net (why is it .net?) we can’t recall ever seeing a pixel style icon in the wild… oh wait… iconfinder has 6 poor birds trapped in this style! Set them free already!
4 Platform Specific Icon Styles (If You’re Into That Sort Of Thing)
Some icon companies like icons8.com (may they live long and prosper) seem to put a lot of value on platform specific icon styles design.
The major downside here being software platforms (iOS, Android, Microsoft, Office) by their nature play to trends and do major design overhauls every few years. Trying to keep up with these changes can be dizzying, especially when you consider they are all just slight variants on the styles above.
But alas, for your merriment dear reader and to being exhaustive, let us now explore platform specific icon styles…
#22 – Apple Icon Style
If you didn’t catch it, Apple’s icon style is just outline style (at least for now). Characterized by soft corners and typically 1px strokes, Apple has stuck to an industry staple for years and likely will continue to do so. Way to keep it simple and classy Apple.
#23 – Android 4 Icon Style
Google, always wanting to be the darling Apple but never quite succeeding, modified the outline style to have bulky 2px strokes, rounder edges and sometimes disconnected endpoints. Ouch.
#24 – Windows 10 Icon Style
The Windows OS and Android teams must have had a secret icon planning meeting because basically they copied each other with Windows opting for sharper corners. Why hello there… might I compliment you on your fabulously sharp corners? Good day.
#25 – Microsoft Office Icon Style
The latest reboot of the Microsoft Office software features a slick user interface update with their icons being a variation of the colored style and featuring responsive icons with four levels of detail. Well played Microsoft.
The only thing we don’t understand is why they full Easter Bunnied that shit? Don’t get us wrong, we like pastels on babies, but apparently in Redmond nothing says business quite like the Easter Bunny.
Custom Icons & Illustration with Team Vectto
Sign up for Vectto free to get 1 free vector download daily. Score. Team Vectto does cool stuff like icons, patterns and custom illustrations for designers, developers, bloggers and marketing teams. Don’t forget to join our monthly newsletter full of stellar vector freebies.
When Vectto started back in 2016, our team was pleasantly surprised at how many cool icon styles we came across which designers don’t use all that often. Try branching out on your next design and giving one of these alternative styles a chance.
Vectto currently focuses on eight of these styles for our public icon library and can provide any style for custom icon requests within one to three days from just $10 per custom icon. Give us a shout sometime, we love helping designers shine even brighter.
Until next time, much love from your Vectto crew!