Como usar o plugin Iconify do zero ao avançado
O Iconify é o plugin de ícones mais completo disponível para o Figma. Com acesso a mais de 200.000 ícones de dezenas de bibliotecas diferentes, ele resolve de vez o problema de encontrar o ícone certo para o seu projeto. Neste tutorial, vamos do básico ao avançado.
Por que usar o Iconify?
Antes do Iconify, designers precisavam baixar arquivos SVG manualmente ou manter bibliotecas locais de ícones. Com o plugin, tudo isso fica dentro do Figma, atualizado e acessível em segundos.
Instalando o plugin
No Figma, clique com o botão direito em qualquer área do canvas
Vá em Plugins > Procurar mais plugins
Pesquise Iconify e clique em Instalar
Uso básico — encontrar e inserir um ícone
Rode o plugin (Plugins > Iconify)
No campo de busca, digite o nome do ícone que precisa (ex: home, user, arrow)
Filtre pelo estilo desejado (Outlined, Filled, Duotone etc.)
Clique no ícone para inseri-lo no canvas
Escolhendo a biblioteca certa
O Iconify agrega ícones de bibliotecas como:
Material Symbols — padrão Google, limpo e versátil
Phosphor — moderno, com 5 pesos diferentes
Feather — minimalista, ótimo para interfaces clean
Heroicons — popular no ecossistema Tailwind/React
Lucide — fork do Feather, muito usado em SaaS
Personalizando cor e tamanho
Após inserir o ícone, ele vira um vetor editável no Figma. Você pode:
Alterar a cor direto no painel de preenchimento
Redimensionar mantendo proporção (segure Shift)
Converter em componente para reutilizar no projeto
Dica avançada: inserir com tamanho pré-definido
No plugin, antes de inserir, defina o tamanho exato do ícone (ex: 24px). Isso garante consistência em toda a interface sem precisar redimensionar manualmente depois.
Exportando para uso em código
O ícone inserido pelo Iconify é um SVG puro. Para exportar: selecione o ícone > painel direito > Export > SVG. Com isso, você tem o ícone pronto para usar em React, HTML ou qualquer framework.
