Lucide

Appearance

On this page

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 { useState } from "react";
import { ThumbsUp } from "lucide-react";
import getRandomColor from "./getRandomColor";
import "./Button.css";

function Button() {
  const [ color, setColor ] = useState('#3e9392');

  function setNewColor() {
    setColor(`#${getRandomColor()}`);
  }

  return (
    <button style={{ color }} onClick={setNewColor}>
      <ThumbsUp />
      Like
    </button>
  );
}

export default Button;
Open on CodeSandboxOpen Sandbox

Adjust the color using props ​

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

Example using a Lucide icon with color prop

import { useState } from "react";
import { Smile } from "lucide-react";
import getRandomColor from "./getRandomColor";

function App() {
  const [ color, setColor ] = useState('#3e9392');

  const setNewColor = () => {
    setColor(`#${getRandomColor()}`);
  }

  return (
    <div class="app">
      <Smile color={color} />

      <button onClick={setNewColor}>
        Change color
      </button>
    </div>
  );
}

export default App;
Open on CodeSandboxOpen Sandbox