Skip to content
WorldStreet
Icons

Icons

398 duotone glyphs on a 24px grid, painted with the ember-to-amber gradient: a soft back layer and a crisp 2px front stroke.

The set

Every icon the WorldStreet apps use today (an audit of 11 apps), plus the domain icons each product needs: money and trading, shop, learning, live and media, calls and social. 64 aliases let old names keep working. Click any icon to copy its JSX.

398 shown

Brands 19

Money & trading 35

Shop 24

Learning 32

Media & live 38

Calls & people 23

Social & messages 35

Files & data 23

Text & layout 36

Status & security 30

Arrows & navigation 38

Devices & system 40

Arcade & fun 20

General 5

Migrating an app

Moving off Lucide, Hugeicons, Phosphor or Iconify is a rename, not a redesign.

  • Write the old name in kebab-case and drop library suffixes: ArrowUpRight01Icon becomes arrow-up-right, Trash2 becomes trash-2, and ph:wallet-duotone becomes wallet.
  • Most names work as they are, either as a glyph or an alias (x, loader, credit-card, log-out, circle-check, trash-2). If one doesn't, search above by meaning, and see integrations/icon-map.json.
  • Inside buttons, nav and lists use tone="current" so the icon takes the text colour. Keep gradient for standalone accents.
  • Crypto tokens (BTC, ETH, USDT…) are brand marks with their own colours. Keep them as token images, not glyphs.
  • If an icon is genuinely missing, add it to the design system (Lucide name or a hand-drawn glyph) and re-sync. Never mix a second icon library back in.

Tones

Gradient for accents, current to match surrounding text (buttons, nav), white on brand tiles.

Code
<Icon name="wallet" />                  // gradient (default)
<Icon name="wallet" tone="current" />   // inherits text colour
<Icon name="wallet" tone="white" />     // on the brand tile
<Icon name="wallet" label="Wallet" />   // meaningful: gets role="img"

Icon tiles

Brand is the ember square with a white glyph and an inner highlight. Glass and outline are the quiet versions for grids.

Code
<IconTile name="shield" />                  // brand
<IconTile name="shield" variant="glass" />
<IconTile name="shield" variant="outline" size="sm" />

Rules

  • Render <IconDefs /> once in the root layout. It holds the gradients every icon points at.
  • Sizes: 16–18 in buttons, 20 in nav and lists, 24–28 standalone. Tiles size their own glyph.
  • Use one brand tile per card. In grids of three or more, use glass or outline tiles.
  • Decorative icons are hidden from screen readers. Pass label when the icon carries meaning, and always label icon-only buttons.
  • The sparkle is the brand glyph. Use it for badges and moments, not as a bullet.