The How and Why of Our Icon Refresh

Old icons on the left, new icons on the right

The short version

Design at a startup

SF Symbols to the rescue!

SF Symbols

Oh snap, SF Symbols doesn’t work on web

Ok, Material icons to the rescue!

How to use an icon

<span class="material-icons">
question_answer
</span>
<span class="material-icons">
description
</span>

Why the other icons were bad

The old icons had different heights, the new ones are perfect squares

Picking the right icon for “Pause Information”

A literal bug, a pause with a little circle, and a literal pause
<span class="material-icons">
motion_photos_paused
</span>

“Design rationale” articles

Designer, writer, teacher. I love building things.