Color ​

By default all icons have the color value: currentColor. This keyword uses the elements computed text color value to represent the icon color.

Read more about currentColor on MDN

Using parent elements text color value ​

Because the color of lucide icons uses currentColor, the color of the icon depends on the color of the parent.

So for example if a parent element color value is #3e9392 and one of the children is a lucide icon, the color of the icon will be rendered as #3e9392. This is browser native behaviour.

Example using a Button component with React

import { ThumbsUp } from "lucide-react";
import "./Button.css";

export default function Button() {
  return (
    <button
      style={{ color: '#3e9392' }}
    >
      <ThumbsUp />
      Like
    </button>
  );
}

Adjust the color using props ​

By passing props the color can adjusted by using the color prop on the element.

[Code Example codesandbox]