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?

1973 Xerox PARC Alto
1984 Apple Macintosh
2013 iOS 7

Icons should help users navigate an interface

Icons on Screens

Pixel Perfect

16 x 24 icon

Ideal

Pixels

Vector

Raster

16x24, 24x36, 32x48
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

Anatomy of a font

p p

p

Stylable

and well supported

but it’s still a hack…

Sizing & positioning

Fallbacks & accessibility

Pig

vs

p Pig

vs

 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!

Bonus Reel

Web Components

Responsive icon design

Microphone from Iconic