Combining icons

You can combine multiple icons into a single icon by nesting SVG elements. This is useful if you want to create custom icons by combining existing ones.

import { Scan, User } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Scan size={48} nonScalingStroke>
        <User
          size={12}
          x={6}
          y={6}
          nonScalingStroke
        />
      </Scan>
    </div>
  );
}

export default App;

Open Sandbox

This is valid, since SVGs can be nested, and all SVG properties are supported on the icons. The x and y coordinates can be adjusted to position the icons as you like.

Limitation

When combining icons, you need to make sure that the x and y coordinates are within the viewBox of the outer icon (24x24).

With native SVG elements

You can also combine Lucide icons with native SVG elements to build custom icon variations.

Example with notification badge

For example, you can add a notification badge to an icon by using the circle SVG element.

import { Mail } from "lucide-react";

function App() {
  const hasUnreadMessages = true;

  return (
    <div className="app">
      <Mail size={48}>
        {hasUnreadMessages && (
          <circle
            r="3"
            cx="21"
            cy="5"
            stroke="none"
            fill="#F56565"
          />
        )}
      </Mail>
    </div>
  );
}

export default App;

Open Sandbox

Example with text element

You can also use the text SVG element to add text to your icon.

import { File } from "lucide-react";

function App() {
  return (
    <div className="app">
      <File size={48}>
        <text
          x={7.5}
          y={19}
          fontSize={8}
          fontFamily="Verdana,sans-serif"
          strokeWidth={1}
        >
          JS
        </text>
      </File>
    </div>
  );
}

export default App;

Open Sandbox