Ícones

@velon-finance/icons · status: stable · foundation

Conjunto de ícones curado para a UI da Velon Platform. Embrulha o lucide-react com um subconjunto curado pela marca, mais aliases de domínio da Velon, marcas da marca (o símbolo do tetraedro) e marcas de método de pagamento.

Um conjunto curado e consistente serve à Verdade: cada ícone significa uma única coisa em todos os apps, então o símbolo sempre lê verdadeiro em relação à ação por trás dele.

Por que curar

O lucide-react traz cerca de 1500 ícones. Os apps da Velon usam uma pequena fração. A curadoria nos dá:

1. Consistência: um único ícone Wallet no Console, no User e no Manager.
2. Marca ao lado do Lucide: a marca-símbolo da Velon e os ícones de método de pagamento vivem no mesmo pacote, então quem consome não precisa malabarizar duas bibliotecas de ícones.
3. Nomenclatura semântica: SendIcon e ReceiveIcon em vez de Send e ArrowDownLeft.

Subconjunto do Lucide (196 ícones)

Os ícones abaixo são reexportados do lucide-react e entregues sob @velon-finance/icons. A lista reflete tudo o que está em produção hoje no Console, no User e no Manager (auditoria 2026-04-29).

import { Wallet, ChevronDown } from '@velon-finance/icons'
 
;<Wallet size={20} className="text-primary" />

Precisa de um ícone que não está aqui? Abra um PR adicionando-o em packages/icons/src/lucide.ts. Manter o catálogo revisável é justamente o objetivo.

Aliases de domínio

Wrappers semânticos para o domínio de produto da Velon. São wrappers (não reexportações de passagem direta), então o glifo subjacente pode mudar depois sem quebrar os imports de quem consome.

import { WalletIcon, SendIcon, ReceiveIcon } from '@velon-finance/icons'

Marcas da marca (símbolo da Velon)

O símbolo da Velon (um tetraedro em wireframe cujas seis arestas convergem para um único vértice, lendo-se como um “V” de frente) conforme o VELON Manual da Marca v1.0 (Junho 2026) §4. Export por subpath, carregado apenas se você importar dele.

import {
  VelonVGradient,
  VelonVMonoLight,
  VelonVMonoDark,
} from '@velon-finance/icons/brand'

Regras rígidas (VELON Manual da Marca v1.0 §4, §6):

• O símbolo usa apenas duas combinações de cor: navy #1B3A6B sobre claro ou branco sobre escuro. Nunca recolora a marca, gire ou distorça, adicione sombras nem aplique gradiente. O símbolo nunca é gradiente (o único gradiente sancionado é a superfície do cartão, §6.2).
• O wordmark sempre vem em caixa alta: VELON. Combine-o com FINANCE no lockup. Tagline: “Simples para pessoas. Completa para empresas.”

Marcas de método de pagamento

SVGs autorais (não Lucide) para os métodos de pagamento da plataforma. Cada um aceita size, title e monochrome (usa currentColor para contextos atenuados).

import { PixIcon } from '@velon-finance/icons/payment'
 
;<PixIcon size={24} />
;<PixIcon size={24} monochrome />

Acessibilidade

Todos os componentes de ícone autorais usam por padrão role="img" com um <title> correspondente à prop title. Passe title="" para renderizar de forma decorativa (aria-hidden).

As reexportações do Lucide herdam o comportamento de acessibilidade upstream: passe um aria-label (ou envolva em um <button> com texto) para leitores de tela.

Não entregues

Facebook, Instagram e Linkedin foram removidos do Lucide upstream por questões de marca registrada e não são reexportados aqui. Apps que precisam de marcas sociais podem:

• Continuar importando-as diretamente de versões mais antigas do lucide-react (a ^0.539.0 ainda as entrega);
• Ou aguardar @velon-finance/icons/social (planejado: SVGs autorais da Velon ao lado das marcas de pagamento).