Designing Stateful Icons

January 3, 2020

I'm sure I'm one of only 2 people in the world that didn't know this yet, so for that one other person, here you go:

Today, I learned that if you're designing icons that have different states, and the dimensions of each state is different, it will cause your UI to jerk around when the state is changed because the dimensions are different.

So, make sure that each icon has the same size container, and is positioned in the same place in that container. If you don't, you will have to tweak it's positioning with CSS instead of just being able to render the icon by itself.

I made that mistake today, but I won't do it again...I hope.