@edusites/icons

1197 ícones SVG em português-BR — tree-shakeable, para Vue, Nuxt, React, Svelte e JS puro. Cada ícone com descrição visual para IA.

Galeria de ícones · Release Notes · Changelog

Por que @edusites/icons?

• 🇧🇷 Nomes em português-BR — casa, lixeira, cadeado, seta-direita. Sem tradução mental.
• 🤖 Descrições para IA — cada ícone tem uma descrição visual do desenho, para que agentes de IA escolham o ícone certo sem ver a imagem.
• 🌳 Tree-shakeable — seu app baixa só os ícones que usa, não os 1197.
• ⚡ Multi-framework — Vue, Nuxt, React, Svelte e JS puro. Zero dependências no núcleo.
• 🎨 Herança de cor e tamanho — funciona como um ícone de fonte (currentColor / 1em).
• 🏦 Feito para o Brasil — bancos, fintechs e meios de pagamento brasileiros + as marcas mais usadas do mundo.

Instalação

npm install @edusites/icons
# ou
pnpm add @edusites/icons
# ou
yarn add @edusites/icons

Uso

Sem Vue no projeto? (React, Svelte, JS puro) importe de @edusites/icons/core — a função svgIcone pura, sem dependências. O entrypoint raiz também exporta o componente Vue SvgIcone, por isso requer Vue.

Nuxt (uso global, sem imports)

Registre uma vez e use <SvgIcone> em qualquer página, sem importar nada.

plugins/edusites-icons.js:

import { instalarIcones } from '@edusites/icons/nuxt'

export default defineNuxtPlugin((nuxtApp) => {
  instalarIcones(nuxtApp)
})

Pronto:

<template>
  <SvgIcone nome="whatsapp" />
  <SvgIcone nome="cadeado" cor="#d4a843" :tamanho="32" />
  <SvgIcone nome="seta-direita" cor="var(--cor-ouro)" :tamanho="20" />
</template>

Herança (como um ícone de fonte): sem cor, o ícone usa currentColor (herda color do CSS). Sem tamanho, usa 1em (escala com o font-size).

<template>
  <span class="botao"><SvgIcone nome="download" /> Baixar</span>
</template>

<style>
.botao { color: #fff; font-size: 20px; }
</style>

Vue 3 (import direto)

<script setup>
import { SvgIcone } from '@edusites/icons'
</script>

<template>
  <SvgIcone nome="estrela" cor="#d4a843" :tamanho="48" />
</template>

JavaScript puro

[!IMPORTANT] Sem Vue no projeto? Importe sempre de @edusites/icons/core. O entry principal (@edusites/icons) reexporta o componente <SvgIcone>, que depende de vue. Como vue é uma peer dependency opcional, importar do entry principal sem tê-lo instalado falha com ERR_MODULE_NOT_FOUND. O /core traz todas as funções — svgIcone, buscarIcones, conjuntoDoIcone e as demais — sem tocar em Vue.

import { svgIcone } from '@edusites/icons/core'

const svg = svgIcone({ nome: 'whatsapp' })
document.getElementById('app').innerHTML = svg

const dourado = svgIcone({ nome: 'estrela', cor: '#d4a843', tamanho: 48 })

React

import { svgIcone } from '@edusites/icons/core'

function Icone({ nome, cor, tamanho }) {
  const svg = svgIcone({ nome, cor, tamanho }) || ''
  return <span dangerouslySetInnerHTML={{ __html: svg }} />
}

Svelte

<script>
  import { svgIcone } from '@edusites/icons/core'
  export let nome, cor = undefined, tamanho = undefined
  $: svg = svgIcone({ nome, cor, tamanho }) || ''
</script>

{@html svg}

Parâmetros

| Propriedade | Tipo | Obrigatório | Padrão | Descrição | | ----------- | -------- | ----------- | --------------- | ------------------------------------------ | | nome | string | ✅ Sim | — | Nome do ícone (ex: casa) | | cor | string | ❌ Não | currentColor¹ | Cor (hex/rgb/var CSS) | | tamanho | number | ❌ Não | 1em¹ | Tamanho em pixels | | className | string | ❌ Não | — | Classe CSS aplicada ao <svg> |

¹ No componente <SvgIcone>, o padrão é herdar do CSS. Na função svgIcone() pura, os padrões são #000000 e 24.

Descrições para IA 🤖

Cada um dos 1197 ícones tem uma descrição visual detalhada do desenho — forma geométrica, se é contorno ou preenchido, elementos internos e o que representa. Foram escritas lendo o SVG real, não o nome, para que agentes de IA escolham o ícone certo por como ele se parece:

import { descricaoDoIcone, buscarIcones } from '@edusites/icons/core'

descricaoDoIcone('cofrinho-porco')
// 'Silhueta lateral preenchida de um cofrinho em formato de porquinho, com corpo
//  oval robusto, focinho arredondado, orelha triangular, quatro perninhas e uma
//  fenda nas costas para inserir moedas — representa poupança ou guardar dinheiro.'

A descrição também alimenta a busca. Termos visuais encontram os ícones mesmo que não estejam no nome:

buscarIcones('telhado')    // ['casa', 'casa-fina', ...]   (todas as casas)
buscarIcones('montadora')  // ['bmw', 'ferrari', 'honda', ...]
buscarIcones('streaming')  // ['netflix', 'disney', 'spotify', ...]

Funções utilitárias

import {
  listarIcones, temIcone, buscarIcones,
  listarCategorias, categoriaDoIcone, iconesPorCategoria,
  descricaoDoIcone, listarVersoes, versaoDoIcone, iconesPorVersao,
  svgIconeAsync, precarregar
} from '@edusites/icons/core'

listarIcones()               // ['aba', 'abajur', 'abelha', ...]
temIcone('whatsapp')         // true
buscarIcones('deletar')      // ['lixeira', ...] — busca por nome, sinônimos, categoria e descrição
listarCategorias()           // ['Ações', 'Animais', 'Bancos', ...]
categoriaDoIcone('nubank')   // 'Bancos'
iconesPorCategoria()         // { 'Bancos': ['nubank', ...], ... }
descricaoDoIcone('casa')     // 'Silhueta frontal preenchida de uma casa...'
versaoDoIcone('nike')        // '1.5.0'
iconesPorVersao()            // { '1.5.0': [...], '1.0.0': [...] }
await svgIconeAsync({ nome: 'casa' }) // versão async (resolve sob demanda)
await precarregar(['casa', 'nike'])   // pré-carrega ícones no cache

Tree-shaking & bundle size 🌳

Cada ícone é um módulo individual, então seu bundle inclui só os ícones que você usa — não a biblioteca inteira. Um app com 20 ícones baixa ~20 ícones, não os 1197.

• No Vite/Nuxt, cada ícone vira um chunk separado, carregado sob demanda.
• No SSR, os ícones são resolvidos de forma síncrona e já saem no HTML (bom para SEO, sem flash).
• Em JS puro / Node, tudo funciona via um fallback interno.

[!TIP] Use <SvgIcone nome="casa" /> normalmente — o carregamento sob demanda é automático. Para garantir um ícone antes de renderizar (ex: gerar SVG num handler), use await precarregar(['casa']) ou svgIconeAsync().

Ícones disponíveis

1197 ícones organizados em 32 categorias. Explore e busque todos na galeria online.

Categorias: Ações · Alinhamento · Animais · Bancos · Casa · Clima · Comida · Comunicação · Comércio · Corpo & Saúde · Cursor · Desenvolvimento · Dispositivos · Documentos · Educação · Financeiro · Gráficos · Imóveis · Interface · Lugares · Marketing · Multimídia · Móveis · Natureza · Navegação · Objetos · Redes Sociais · Segurança · Tecnologias · Tempo · Usuário · Veículos.

Programaticamente: listarIcones(), buscarIcones(termo), iconesPorCategoria().

Conjuntos

Um conjunto é a família de origem do ícone. Ícones do mesmo conjunto foram desenhados juntos, sob as mesmas regras de grade, espessura de traço e cantos — então combinam entre si numa mesma tela. Ícones de conjuntos diferentes podem destoar mesmo estando na mesma categoria temática.

| | | |---|---| | categoria | responde "sobre o que é?" — Bancos, Animais, Financeiro… | | conjunto | responde "com quais outros ele combina?" |

| Conjunto | Ícones | Prefixo | Desenho | |---|---|---|---| | base | 1088 | — | origem variada | | gestao-dev | 109 | gd- | grade única, traço convertido em contorno | | edusites | 107 | es- | linha de 9px arredondada, convertida em contorno | | pagzero | 122 | pz- | preenchido (filled), cantos arredondados, moldura 100×100 |

Os es-* são a família da plataforma EduSites: traço de 9px com pontas e junções arredondadas, desenhados numa grade de 100×100 — interface, player de vídeo, gamificação e comunidade.

Os pz-* são a família da plataforma PagZero: desenho preenchido (filled) de cantos arredondados, numa moldura fixa de 100×100 — checkout, meios de pagamento, vendas, produtos e painel do produtor.

Os gd-* e es-* têm o viewBox recortado no desenho, e não numa moldura fixa: o eixo maior encosta nas bordas. Assim dois ícones com o mesmo tamanho saem com o mesmo peso visual — sem um parecer menor que o outro por ter mais margem embutida.

// fora do Vue, importe de /core (o entry principal carrega o componente Vue)
import { conjuntoDoIcone, listarConjuntos, iconesPorConjunto, mesmoConjunto } from '@edusites/icons/core'

conjuntoDoIcone('gd-check')            // 'gestao-dev'
conjuntoDoIcone('check')               // 'base'
listarConjuntos()                      // ['base', 'edusites', 'gestao-dev', 'pagzero']
iconesPorConjunto()['gestao-dev']      // ['gd-agenda', 'gd-alvo', ...]

mesmoConjunto('gd-lixeira', 'gd-editar')  // true  — combinam
mesmoConjunto('gd-lixeira', 'nubank')     // false — famílias diferentes

O conjunto gestao-dev usa o prefixo gd- porque 95 dos seus nomes já existiam no base (check, calendario, usuario…). Com o prefixo os dois desenhos coexistem e nenhum projeto muda de visual ao atualizar a lib — para adotar a família nova, troque o prefixo nos seus <SvgIcone>:

<SvgIcone nome="check" />     <!-- desenho antigo (base) -->
<SvgIcone nome="gd-check" />  <!-- desenho novo (gestao-dev) -->

Buscar pelo nome do conjunto traz a família inteira: buscarIcones('gestao-dev').

Marcas registradas / Trademark ⚠️

Esta biblioteca inclui logotipos de marcas (big techs, bancos, cartões, delivery, etc.), fornecidos apenas para fins de identificação e interoperabilidade. Esses logos são propriedade de seus respectivos donos e sua inclusão não implica endosso ou afiliação.

O código desta biblioteca é licenciado sob MIT. O uso dos logos de marca é de responsabilidade de quem os utiliza e deve respeitar as diretrizes de marca de cada empresa. Ícones que são marcas têm marca: true nos metadados.

Contribuindo 🙏

Contribuições são bem-vindas! Veja o guia de contribuição para adicionar um novo ícone.

Licença 📎

MIT © Lecdt.com — Eduardo Sites. Os logos de marca pertencem aos seus respectivos donos (veja Marcas registradas / Trademark).