Twitch Icons

Twitch uses a custom version of Roobert called Roobert TW for display text as well as Inter for body text. When I first joined the company these 2 fonts were being introduced as a brand refresh that was internally called UV or Ultraviolet. My first task was to design a new set of icons to pair with these fonts, and I continued drawing those icons for all 4 years I was there. There are a bit over 300 total.

Most of the Twitch Icons laid out in a grid.
 

General Icon Rules

I developed a set of rules to keep icons consistent. Drawing icons is really fun, and I love that it let me interact directly with people on all different feature teams at Twitch.

  • 20x20 for Web, 24x24 for Mobile. This was going to be consolidated into a single 24x24 icon set in a coming update.

  • 2px stroke for all lines

  • 2px gap between strokes

  • Try to avoid fills, when not attempting to communicate an active state on the icon.

  • Use 45 degree angles where the shapes allow

  • 2px inner radius on corners

  • There are some exceptions to these rules on a case by case basis.