Icons and the Web

betravis / bear_travis
bear.me/icons-web

About Me

What is an Icon?

Icons are visual metaphors that help users navigate an interface.

Why do we need them?

* And if we jump forward just a little bit more, we get to modern devices * 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 are everywhere! * 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

Icons should help users navigate an interface

Icons on Screens

Pixel Perfect

Ideal

Pixels

Vector

Raster

icon on 20 x 20 grid

result of 0.5px offset

The bad news

Icons may lose clarity when working with anything other than the exact pixels.

The good news

High resolution displays make these issues less visible.

Icon Delivery

Icons should be

Scalable

Stylable

Accessible

"rabbit"

Packagable

Performant

Easy to author & use

Raster Icons

Minimizing resource loads

Stylesheet Embed

Spritesheet

What’s Good

Pixel-level control
Browser support

What’s Not

Fixed size & resolution
Limited packaging support

Icon fonts

p p

p

Stylable

and well supported

but it’s still a hack…

Sizing & positioning

Fallbacks & accessibility

Pig

p Pig

 Pig

What’s good

Scalable
Stylable
Solid browser support

What’s not

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

SVG

Support

Including SVG

Inline

Linked

SVG as Package

Icon Stacks

Icon Symbols

Internal Symbol

External Symbol

Accessibility

Stylable

What’s Good

Individual or packaged icons
Vector based
Use as image
Many tool options

What’s Not

Browser support

Summary

Use whatever makes your life easier.
I recommend SVG where possible.

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/icons-web

Bonus Reel

Web Components

Responsive icon design

Icons and the Web

About Me

What is an Icon?

Why do we need them?

Icons on Screens

Pixel Perfect

Ideal

Pixels

Vector

Raster

The bad news

The good news

Icon Delivery

Icons should be

Scalable

Stylable

Accessible

Packagable

Performant

Easy to author & use

Raster Icons

Minimizing resource loads

Stylesheet Embed

Spritesheet

What’s Good

What’s Not

Icon fonts

&#112; p

&#112;

Stylable

and well supported

but it’s still a hack…

Sizing & positioning

Fallbacks & accessibility

Pig

p Pig

 Pig

What’s good

What’s not

SVG

Support

Including SVG

Inline

Linked

SVG as Package

Icon Stacks

Icon Symbols

Accessibility

Stylable

What’s Good

What’s Not

Summary

Thanks!

Bonus Reel

Web Components

Responsive icon design

p p

p