开源来源
图标来自 Lucide 图标库（MIT 许可）。
显示 120 / 1904 个图标复制操作
复制名称用于 lucide-react 引用；复制 SVG 为原始标记；复制 React 为独立组件代码。
开源 SVG 图标库
此页面列出了完整的 Lucide 图标库，支持快速搜索、预览与复制输出，方便设计与开发使用。
- 用图标名称直接搭配 lucide-react 使用
- 复制原始 SVG 标记用于 Figma 或 HTML
- 复制 React 组件，免依赖直接使用
- 一键在 SVG 编辑器中打开优化
SVG 图标用法示例
常见的 SVG 图标库使用方式，涵盖 React、HTML 与设计工具。
配合 lucide-react 使用
按名称导入并作为 React 组件渲染。
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
HTML 内联 SVG
将 SVG 标记直接粘贴到 HTML 或设计工具中。
<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>
独立 React 组件
无需额外依赖，直接复用 SVG 组件。
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>
);
}
