Iconify: biblioteca de ícones open source

• Plataforma unificada de ícones que permite explorar e usar, em um só lugar, diversos conjuntos de ícones open source
• Oferece 204 conjuntos classificados em várias categorias, com cerca de 280 mil ícones
• Suporta obtenção de informações de ícones e geração de SVG/CSS via API. Também oferece API de busca, que pode ser usada em plugins para Figma/Sketch
• Cada conjunto é distribuído sob diferentes licenças abertas, como Apache 2.0, MIT, CC BY e GPL
• Inclui ícones dos principais sistemas de design, como Google Material, Fluent UI, Font Awesome, Tabler e HeroIcons

---

Visão geral do Iconify

• O Iconify é um repositório central de conjuntos de ícones open source, onde é possível explorar diversos ícones por meio de uma interface web
• Cada conjunto de ícones é composto por nome, tipo de licença, quantidade de ícones e link individual
• Os usuários podem filtrar por categoria e selecionar conjuntos como Material, UI, Emoji, Logos, Programming etc.

Principais categorias de ícones

• Linha Material: 6 conjuntos, incluindo Material Symbols e Material Design Icons, com até mais de 15.000 ícones
• Conjuntos UI 24px: mais de 50 conjuntos, como Solar, Tabler, Remix, Lucide e Iconoir, oferecendo vários estilos e tamanhos
• Conjuntos UI 16px / 32px: incluem 18 conjuntos, como Carbon, IonIcons, Ant Design Icons e Bootstrap Icons
• UI Other / Mixed Grid: inclui vários conjuntos grandes, como Fluent UI System Icons (18.959) e Phosphor (9.072)
• Conjuntos UI multicoloridos: oferecem ícones coloridos de Streamline, Fluent Color, IconPark e outros
• Conjuntos Programming: 9 conjuntos voltados ao ambiente de desenvolvimento, como VSCode Icons, Devicon e File Icons
• Conjuntos Logos: 15 conjuntos focados em marcas e logotipos, como Simple Icons, SVG Logos e Web3 Icons
• Conjuntos Emoji: compostos por 11 conjuntos, como OpenMoji, Twemoji e Noto Emoji
• Conjuntos Flags / Maps: incluem 7 conjuntos, como Circle Flags e Flag Icons
• Conjuntos temáticos: 8 conjuntos por tema, como Game Icons, Health Icons e Weather Icons
• Conjuntos Archive / Unmaintained: armazenam 30 conjuntos de versões anteriores, como Font Awesome 4~6 e Eva Icons

Diversidade de licenças

• Cada conjunto é distribuído sob várias licenças abertas, como Apache 2.0, MIT, CC BY, GPL e OFL(Open Font License)
• Alguns conjuntos podem ser usados livremente em formatos como CC0 (domínio público) ou Unlicense
• Como as informações de licença são explicitadas, é fácil verificar se o uso comercial e as modificações são permitidos

Exemplos de conjuntos de ícones representativos

• Fluent UI System Icons: licença MIT, 18.959 ícones
• Material Symbols Light: Apache 2.0, 15.180 ícones
• Tabler Icons: MIT, 5.986 ícones
• Simple Icons: CC0, 3.379 logotipos de marcas
• OpenMoji: CC BY-SA 4.0, 4.449 emojis

Valor de uso

• Garante acesso consistente a ícones em vários sistemas de design e frameworks
• Desenvolvedores e designers podem escolher imediatamente o estilo e a licença adequados aos requisitos do projeto
• Plataforma de recursos que promove reutilização e padronização de ícones em todo o ecossistema open source
• Consulte a página da documentação oficial para ver formas de uso e informações sobre API/plugins

[GN⁺]

Comentários do Hacker News

• O Iconify permite buscar SVGs de ícones diretamente via API
  Eu costumo criar diagramas de arquitetura com D2, e usar junto a enorme biblioteca de ícones do Iconify deixa tudo visualmente muito mais rico
  Por exemplo, em um diagrama conectando Docker e Kubernetes, é possível especificar os SVGs de ícone de cada um

• Alguns SVGs têm animação aplicada, e também dá para pesquisar
  Usei esses ícones no editor de texto offline wrifocus.bounded.cc, e fiquei muito satisfeito com o resultado

  • Fiquei curioso sobre qual conjunto de ícones foi usado. Quando filtro por “contains animations”, só aparecem mais ou menos conjuntos de loaders e ícones de clima
  • A animação da engrenagem girando no ícone de configurações é especialmente legal. O editor em si também é impressionante
    Queria saber se também dá para usar online salvando os dados no servidor, e por que ele foi feito como algo offline e baseado no navegador
  • Obrigado por compartilhar. Também queria saber se é possível rodar o projeto de forma self-hosted

• icones.js.org é um ótimo site para pesquisar ícones desse tipo

• Fiquei com vontade de escrever um texto sobre otimização de ícones
  É frustrante ver sites que não colocam os ícones inline e acabam causando instabilidade no layout

  • Concordo. Ícones inline são uma boa abordagem, mas podem aumentar o tamanho do DOM
    Dependendo da complexidade do ícone ou da frequência de reutilização, lazy loading pode ser melhor
    No fundo, esse problema acontece porque o espaço não foi reservado corretamente
  • Definir os atributos width/height também é uma boa solução. aspect-ratio também costuma ser recomendado
    Só que ícones inline acabam ficando sem cache
    Referência relacionada: artigo da web.dev sobre otimização de CLS

• Link da discussão anterior: debate de setembro de 2024

• Muitos elogios para este projeto. Eu o uso todos os dias em quase tudo que faço
  Fiquei surpreso ao ver que há devicons do projeto k3s tanto em versão colorida quanto em escala de cinza

• O Pictogrammers tem uma pequena vantagem
  Ele fornece diretamente o código do Home Assistant para ícones Material, então com um clique você já obtém o código necessário

• Recomendo The Noun Project como outra excelente fonte de ícones
  Há uma mistura de ícones gratuitos, CC-BY-3.0 e com licença paga

  • Porém, se você não pagar, precisa remover manualmente código desnecessário do SVG, o que é bem inconveniente

• Várias respostas diferentes para a pergunta sobre qual é a melhor biblioteca de ícones

  • Pessoalmente, acho que o auge foi o conjunto de ícones famfamfam Silk por volta de 2005
    Foi uma pena não existirem versões em alta resolução ou SVG, mas hoje em dia talvez dê para compensar isso com IA
    Ver / Download
  • Recomendo Lucide
  • Gosto de Phosphor Icons. Fora isso, no geral uso Material UI Icons
  • Eu uso bastante FlatIcon principalmente para desenvolvimento de jogos
  • SVGRepo é fácil de usar, porque permite ajustar diretamente espessura do traço, cor etc.

• Meu site universymbols.com consegue expandir vários conjuntos de ícones do Iconify com modelos de imagem de IA
  Assim, além dos grandes conjuntos já existentes, dá para criar também conjuntos de ícones mais originais