Open-source source
Icons provided by the Lucide icon set (MIT license).
Showing 120 of 1904 iconsCopy actions
Copy name is for lucide-react imports. Copy SVG is raw markup. Copy React creates a standalone component.
Open-source SVG icon set
This page lists the full Lucide icon library with fast search, previews, and copy-friendly outputs for design and development workflows.
- Use icon names directly with lucide-react
- Grab raw SVG markup for Figma or HTML
- Copy React components for no-dependency usage
- Open icons instantly in SVG Editor for cleanup
SVG icon usage examples
Common ways to use this SVG icon library in React, HTML, and design workflows.
Use with lucide-react
Import by name and render the icon as a React component.
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
Inline SVG in HTML
Paste raw SVG markup directly into your HTML or design tool.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
Standalone React component
Copy the SVG into a reusable React component without extra dependencies.
export function ActivityIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
);
}
