Icons are everywhere, yet they’re probably the easiest thing in your design system to screw up. I’ve seen so many <Icon> components that overcomplicate the DOM while doing nothing to make accessibility easier to achieve.
If your <Icon> component wraps your <svg> element in a <div>- especially if that <div> has no classes- you’re already headed down the wrong path.1
I try to avoid having an <Icon> component at all, though there are some approaches that justify it- like using a custom icon font. We’ll dive into this later, but the prevalence of icon fonts like FontAwesome hints at the key to keeping icons dead simple: treating them like text.
Treating Icons Like Text
Icons should behave like text because they're fundamentally semantic content used to convey meaning. They’re usually inline elements that flow with surrounding text, which means they share the following traits:
Context: Like words, icons represent concepts, actions, or information states. The rule of thumb with buttons, especially in headers or sidebars for navigation, is to either show the user with an icon or tell the user with a label but not both.
Scalability: Icons should scale conformally with text when users adjust font sizes.
Color: Icons typically inherit the color of surrounding text for visual consistency.
Alignment: Icons need to align properly with text baselines and line heights.
Leveraging the browser’s ability to render text by setting the <svg> element’s fill attribute to "currentColor" and using em instead of rem for sizing allows these behaviors to emerge organically.
Recommended Props
Keep reading with a 7-day free trial
Subscribe to UI Engineering Excellence to keep reading this post and get 7 days of free access to the full post archives.