@edusites/icons

@edusites/icons

1647 í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 1647.
• ⚡ 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)

Recomendado: o módulo. Uma linha no nuxt.config registra <SvgIcone> no app inteiro e faz o build levar só os ícones que o site usa:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@edusites/icons/nuxt-module']
})

Nome de ícone montado em tempo de execução (ex.: `ef-${tipo}`) não aparece no código: liste em incluir.

export default defineNuxtConfig({
  modules: ['@edusites/icons/nuxt-module'],
  edusitesIcons: { incluir: ['ef-agua', 'ef-sol'] }
})

plugins/edusites-icons.js:

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

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

Funciona igual na tela, mas o build gera um arquivo por ícone da lib (só os usados são baixados pelo visitante).

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

¹ 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 1647 í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: o visitante baixa só os ícones que aparecem na tela — não a biblioteca inteira.

• No SSR, os ícones são resolvidos de forma síncrona e já saem no HTML (bom para SEO, sem flash). Na hidratação, o cliente reaproveita o que veio no HTML e não baixa nada.
• Na navegação interna, cada ícone novo é um chunk pequeno carregado sob demanda.
• Com o módulo Nuxt ou o plugin Vite, o build também só gera os ícones usados: o projeto varre o código atrás de nomes de ícone entre aspas (nome="casa", { icone: 'casa' }) e o resto da lib nem entra no build. Num site com 3 ícones: de ~1.660 arquivos para ~20, e nenhum arquivo de 2,4 MB.
• Em JS puro / Node, tudo funciona via um fallback interno.

Vite (Vue sem Nuxt)

// vite.config.js
import { edusitesIconsVite } from '@edusites/icons/vite'

export default {
  plugins: [vue(), edusitesIconsVite({ incluir: [] })]
}

[!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

1647 í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.

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 ef-* são a família do app Encarafit (personal trainer e treino): desenho de traço de verdade — fill="none", stroke="currentColor", espessura 2.5 numa grade de 24×24 com 2px de respiro, pontas e junções redondas. DNA da marca: setas, check, alvo e halter a 45°, e círculos/caixas com um respiro diagonal no canto superior direito (ef-busca, ef-relogio, ef-info, ef-check-circulo, ef-check-in). Só os pontos pequenos (o pingo do ef-info, os olhos do ef-humor-bom) são preenchidos. Cobre navegação, treino e equipamentos, músculos, voz e IA, hábitos e nutrição, gestão do personal e social. O traço escala junto com o ícone: em 16, 32 ou 48 px o peso continua proporcional (não é redesenhado).

<SvgIcone nome="ef-halter" />                        <!-- herda cor e tamanho -->
<SvgIcone nome="ef-treino" cor="#D6FF3F" :tamanho="32" />

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'
conjuntoDoIcone('ef-halter')           // 'encarafit'
listarConjuntos()                      // ['base', 'edusites', 'encarafit', '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

Desde a 1.9.0, o gestao-dev é um conjunto em camadas: cada ícone é um objeto sólido de uma cor só, com gradiente de transparência, detalhes recortados e uma placa de base que dá espessura (estilo "vidro 3D"). Ele continua herdando a cor pelo currentColor — a diferença é que o volume vem da transparência.

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'), buscarIcones('encarafit').

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).