Every icon best practice you need to know

My rule of thumb for when to use variants for icons is: never. In the example above, what’s shown as variants are different controls, not icons. They are things you can toggle, they are interchangeable. Ignoring the obvious example like a radio button and a checkbox, the sound on/off icons work as a button in this case, so they may have different color and styling depending on whether or not they are toggled. The stocks up/down icons can be green and yellow respectively. And in this case they do have different states which can be toggled. But as icons they are not more than a pictogram, so they shouldn’t have different states.

10 Likes