By default, all icons have the color value:
currentColor. This keyword uses the element's computed text
color value to represent the icon color.
Read more about
currentColor on MDN.
Adjust the color using the
The color can be adjusted by passing the color prop to the element.
Using parent elements text color value
Because the color of lucide icons uses
currentColor, the color of the icon depends on the computed
color of the element, or it inherits it from its parent.
For example, if a parent element's color value is
#fff and one of the children is a lucide icon, the color of the icon will be rendered as
#fff. This is browser native behavior.