glifo

Ícones de marcas tech para React — AI/LLM + tech geral. Tipados, tree-shakeable, com variantes prontas.

~3.900 ícones (AI/LLM, tech, AWS) · uma marca = um componente · importou 1, entra 1 no bundle

Explore e busque todos os ícones → icons.glifohub.com

Instalação

npm i glifo

Precisa só dos SVGs crus (sem React)? Use @glifo/svg.

Uso

Cada marca é um componente. size é 24 por padrão, herda a cor via currentColor.

import { Github, Openai, Claude } from 'glifo';

<Github />
<Github size={32} />
<Github className="text-violet-500" />

Variantes

Todo ícone traz variantes prontas:

<Github />           {/* mono — currentColor, adapta ao tema */}
<Github.Color />     {/* colorido — cor real da marca */}
<Github.Avatar />    {/* quadrado arredondado com o fundo da marca */}
<Github.Combine />   {/* ícone + nome lado a lado */}
<Github.Text />      {/* só o wordmark */}
<Github.Tag />       {/* pill com ícone + nome — ideal pra marcar modelo/marca */}

| Variante | O que renderiza | |----------|-----------------| | <X /> | Mono (currentColor) | | <X.Color /> | Arte colorida da marca | | <X.Avatar /> | Tile com bg da cor da marca | | <X.Combine /> | Ícone + nome | | <X.Text /> | Só o nome | | <X.Tag /> | Pill (ícone + label) |

Componente dinâmico

Quando o nome do ícone vem de uma string (ex: um provider do banco):

import { Glifo } from 'glifo';

<Glifo name="whatsapp" />
<Glifo name="openai" variant="color" />
<Glifo name="claude" variant="tag" />

variant: 'mono' | 'color' | 'avatar' | 'combine' | 'text' | 'tag'.

Metadados de um ícone

Github.slug;      // "github"
Github.iconTitle; // "Github"
Github.hex;       // "181717"  (cor da marca, sem '#')

TypeScript

100% tipado. Todos os componentes aceitam as props de <svg> (className, style, onClick, ref, ...) além de size.

Tamanho & tree-shaking

sideEffects: false + um módulo por ícone. Importe o que usar; só isso entra no bundle — o resto é dropado pelo bundler (Vite, webpack, esbuild, Rollup...).

Medido com bundle real (esbuild, minificado):

| Import | Bundle | |--------|--------| | import { AwsEc2 } from 'glifo' | ~4.8 KB | | 3 ícones nomeados | ~6 KB | | import { registry } (todos, dinâmico) | ~6 MB |

node_modules ≠ bundle. Sim, npm i glifo baixa todos os ícones pro node_modules (disco do dev/CI) — igual react-icons, lucide, @mui/icons-material. Isso não é enviado pro usuário: só o que você importa vai pro bundle. Usar 5 ícones = ~5 KB no browser, não 7 MB.

O único caminho que puxa tudo é o registry/<Glifo name> dinâmico (busca por string precisa de todos) — use só quando o nome do ícone for realmente dinâmico.

Licença

Código sob MIT. A arte dos ícones vem de lobe-icons (MIT), simple-icons (CC0) e do conjunto oficial AWS Architecture Icons (CC-BY-ND, usado sem modificação da arte para identificar os serviços AWS). Todos os logos e marcas pertencem aos seus respectivos donos e são usados apenas para identificação.