React Icons for Dark Mode
Dark mode is not just an inverted background. Icon colour, stroke weight, muted states, and active emphasis all need to be checked against the dark surface where they appear.
Let icons inherit semantic colour
SVG components using currentColor can follow text and CSS variables. Define light and dark values for primary, muted, action, and danger roles instead of hard-coding a colour in each icon.
Check thin strokes and muted states
A light outline that works on white may disappear on a dark surface. Test stroke weight, opacity, hover, focus, and disabled states at the real rendered size.
Use one icon meaning across modes
Dark mode should change treatment, not product language. Shared semantic IDs let a React application keep the same icon choices while the theme controls colour and visual style.