How to Use Duotone Icons in React
Duotone icons use a primary shape and a secondary layer to create depth without becoming an illustration. In React, the important details are layer order, colour inheritance, and contrast.
Treat the layers as one semantic icon
The primary and secondary paths should be designed together and remain recognisable when the secondary layer is muted or hidden. Do not expose them as unrelated icons in application code.
Control colour deliberately
Use currentColor for the primary layer and a controlled opacity or secondary CSS variable for the supporting layer. This allows the same component to work in cards, navigation, and dark mode.
Keep contrast and states clear
Duotone should support hierarchy, not make a small icon noisy. Check disabled, hover, focus, and dark-mode states at the actual size used in the interface.