Icons

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

Curated icon set for the Velon Platform UI. Wraps lucide-react with a brand-curated subset, plus Velon domain aliases, brand marks (the tetrahedron symbol), and payment-method marks.

A curated, consistent set serves Verdade: each icon means one thing across every app, so the symbol always reads true to the action behind it.

Why curate

lucide-react ships ~1500 icons. The Velon apps use a small fraction. Curation gives us:

1. Consistency: one Wallet icon across Console, User, and Manager.
2. Brand alongside Lucide: the Velon symbol mark and payment-method icons live in the same package, so consumers don’t juggle two icon libraries.
3. Semantic naming: SendIcon and ReceiveIcon instead of Send and ArrowDownLeft.

Lucide subset (196 icons)

The icons below are re-exported from lucide-react and shipped under @velon-finance/icons. The list reflects everything in production today across Console, User, and Manager (audit 2026-04-29).

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

Need an icon that isn’t here? Open a PR adding it to packages/icons/src/lucide.ts. Keeping the catalog reviewable is the whole point.

Domain aliases

Semantic wrappers for the Velon product domain. These are wrappers (not pass-through re-exports), so the underlying glyph can change later without breaking consumer imports.

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

Brand marks (Velon symbol)

The Velon symbol (a wireframe tetrahedron whose six edges converge to a single vertex, reading as a “V” from the front) per the VELON Manual da Marca v1.0 (Junho 2026) §4. Subpath export, only loaded if you import from it.

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

Hard rules (VELON Manual da Marca v1.0 §4, §6):

• The symbol uses only two colorways: navy #1B3A6B on light, or white on dark. Never recolor the mark, rotate or distort it, add shadows, or apply a gradient. The symbol is never gradient (the only sanctioned gradient is the card surface, §6.2).
• The wordmark is always set in caps: VELON. Pair it with FINANCE in the lockup. Tagline: “Simples para pessoas. Completa para empresas.”

Payment-method marks

Authored SVGs (not Lucide) for the platform’s payment methods. Each accepts size, title, and monochrome (uses currentColor for muted contexts).

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

Accessibility

All authored icon components default to role="img" with a <title> matching the title prop. Pass title="" to render decoratively (aria-hidden).

Lucide re-exports inherit upstream accessibility behaviour: pass an aria-label (or wrap in a <button> with text) for screen readers.

Not shipped

Facebook, Instagram, and Linkedin were removed from Lucide upstream due to trademark concerns and are not re-exported here. Apps that need social marks can:

• Continue importing them from older lucide-react versions directly (^0.539.0 still ships them);
• Or wait for @velon-finance/icons/social (planned: Velon-authored SVGs alongside the payment marks).