BYLD Wealth — Icon Catalog

01 · Icons

Icon System

Stroke-based SVGs. All icons render at 24×24 default, scale to 16 or 20 via size tokens. Use currentColor — never hardcoded fills.

Navigation 5

home

portfolio

mia / sparkle

markets

profile

Actions 5

back

download

edit

Status 4

check-circle

x-circle

warning

info

Finance 5

chart-bar

wallet

sip-recurring

tax-%

insurance

MIA 4

bloom-avatar

thinking-dots

thumbs-up

regenerate

02 · Rules

Icon Rules

Engineering specs for consistent icon implementation across all 171 screens.

Size Variants

Three canonical sizes. 24px default. 20px for compact UIs. 16px for inline/label use. Always specify both width + height attributes.

16px

20px

24px

          /* Size tokens */

          --icon-sm: 16px;

          --icon-md: 20px;

          --icon-lg: 24px; /* default */

Stroke Width & Color

Always use stroke-width="1.5". Never hardcode fill or stroke colors — use currentColor so icons inherit from parent CSS color property.

sw: 1 ✗

sw: 1.5 ✓

sw: 2 ✗

          /* Always inherit color */

          .icon { color: var(--gold); }

          stroke="currentColor"

          fill="none"

          stroke-width="1.5"

Accessibility · aria-hidden

Decorative icons: aria-hidden="true". Standalone actionable icons: add role="img" + aria-label. Never leave a focusable icon without a label.

// Decorative (next to visible label)

// Standalone (no visible label)

<svg

role="img"

aria-label="Go back"

          /* Focus visible — WCAG 2.4.11 */

          svg:focus-visible {

            outline: 2px solid var(--gold-mid);

            border-radius: 4px;

          }