Icons and the Web

Bear Travis

Icons on Screens

Icons are visual metaphors that help users navigate an interface.

* Icons are everywhere these days * Smaller screens, packing more information * One helpful way to sort all of that is to pack it into pictures, often paired with text * We can also see how varied their use can be. On the right, we have icons to help navigate options while performing a specific task. * On the left, we have icons to provide branding and differentiate between entirely different tasks. * We see icons on the top to indicate signal strength, wifi, battery power. * Icons work best when they are quickly understood -- you need to have a reason to take up all that visual real estate, especially when you are working with small screens. * Context is part of it -- top left tells us signal strength, probably less understandable in a different context * Top right tells us battery power * Imagine if these were both just percentages, maybe with "Signal" and "Battery Power" instead * Same information, but this is packaged in less space and less visually cluttered * Smaller screens are also probably part of why we are seeing so many of these

Raster Icons

Ideal

Pixels

icon on 20 x 20 grid

result of 0.5px offset

The bad news

Vector artwork may not scale cleanly to physical pixels.

The good news

High resolution displays make these issues less visible.

Icon fonts

Stylable & Scalable

and well supported

but it’s still a hack…

Sizing & positioning

Fallbacks & accessibility

Pig

p Pig

 Pig

SVG

Support

Including SVG

Inline

Linked

SVG as Package

Icon Symbols

Internal Symbol

External Symbol

SVG with Fallbacks

Which one should I use?

A quick recap

Icon Fonts

What’s good

Scalable
Stylable
Solid browser support

What’s not

Imprecise size & positioning
Verbose accessibility & fallbacks
Difficult to author fonts

Raster Icons

What’s Good

Pixel-level control
Browser support

What’s Not

Fixed size & resolution
Limited packaging support

SVG Icons

What’s Good

Individual or packaged icons
Vector based
Some styling support
Use as image
Many tools available

What’s Not

Browser support

SVG is your best bet for most cases, especially when coupled with a raster fallback.

Use whatever makes your life easier.

Thanks!

Bulletproof font icons by filament group
SVG packaging by simurai and Chris Coyier
SVG accessibility by Doug Schepers and Léonie Watson
Artwork by freepik and marinad
betravis
bear_travis
bear.me/ts-icons-web

Bonus Reel

Web Components

Responsive icon design