Documentação para programadores
Biblioteca de ícones vetoriais e 3D para desenvolvedores e designers
Adicione o catálogo de 76,166 ícones, a API de busca JSON e componentes sem dependencias aos seus projetos React, Next.js, Vue 3, Svelte, Tailwind CSS ou PHP.
1. API de busca JSON e facetas (GET /api/icons)
Filtre por palavra-chave, pasta de biblioteca, categoria, estilo ou licença. A resposta devolve ícones paginados com SVG seguro, sugestoes e facetas correspondentes.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. Caminhos diretos dos arquivos vetoriais
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. Padrao de componente sem dependencias
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
Guias Práticos e Tutoriais de SVG
SVG vs PNG: Qual Formato Você Deve Usar?
Use SVG para ícones de sites, logotipos e interfaces porque os vetores ficam nítidos em qualquer tela. Use PNG quando precisar de uma imagem de pixels fixos para e-mails ou redes sociais.
Como Animar Ícones SVG com CSS
Adicione uma classe CSS ao seu SVG inline e aplique keyframes com transform ou stroke-dasharray. Nosso editor gera animações suaves a 60fps sem JavaScript.
Como Editar Ícones SVG no Figma ou no Navegador
Copie o código SVG do SVG Nexus e cole diretamente no Figma ou Illustrator para editar nós e cores, ou abra o ícone no nosso Estúdio Vetorial no navegador.
Como Usar Ícones SVG no React, Next.js e Vue
Selecione a aba React TSX ou Vue 3 em qualquer página de ícone para copiar um componente pronto compatível com currentColor e Tailwind CSS.