Fonte open source
Ícones fornecidos pelo conjunto Lucide (licença MIT).
Mostrando 120 de 1904 íconesAções de cópia
Copiar nome é para imports com lucide-react. Copiar SVG é o markup bruto. Copiar React cria um componente independente.
Conjunto open source de ícones SVG
Esta página lista a biblioteca completa de ícones Lucide com busca rápida, prévias e saídas fáceis de copiar para fluxos de design e desenvolvimento.
- Use os nomes dos ícones diretamente com lucide-react
- Pegue o markup SVG bruto para Figma ou HTML
- Copie componentes React para uso sem dependências
- Abra ícones instantaneamente no SVG Editor para limpeza
Exemplos de uso de ícones SVG
Formas comuns de usar esta biblioteca de ícones SVG em React, HTML e fluxos de design.
Usar com lucide-react
Importe pelo nome e renderize o ícone como um componente React.
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
SVG inline em HTML
Cole o markup SVG bruto diretamente no seu HTML ou ferramenta de design.
<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>
Componente React independente
Copie o SVG para um componente React reutilizável sem dependências extras.
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>
);
}
