Icons

The <lt-icon> component renders SVG icons from the Latty icon registry. The built-in set includes 152 icons across 9 categories — all custom-drawn SVGs that inherit color via currentColor. Click any icon below to copy its usage snippet.

Design Assets

Download all 152 icons as ready-to-use SVG files for Figma, Sketch, or any design tool. Each icon is a 24×24 SVG with a black stroke — import once, then recolor freely.

Download SVGs (.zip, 152 icons)

Installation

Icons are included in @latty-ds/web — no extra package needed for basic usage:

import '@latty-ds/web'; // registers <lt-icon> along with all other components

If you only need icons (no other components), install the icons package directly:

# pnpm
pnpm add @latty-ds/icons

# npm

npm install @latty-ds/icons

# yarn

yarn add @latty-ds/icons

// All built-in icons are registered automatically when the package is imported.
// For per-icon tree-shaking, import individual icons instead:
import '@latty-ds/icons/star';
import '@latty-ds/icons/arrow-right';

Available Icons

Size

Navigation

Actions

UI Elements

Feedback

Interaction

Shapes

Social

Media

Tech

Sizes

xs12px

sm16px

md20px

lg24px

xl32px

Usage

import '@latty-ds/icons/star';

<!-- Default size (md = 20px) -->

<lt-icon name="star" />

<!-- With explicit size -->

<lt-icon name="arrow-right" size="lg" />

<!-- Fluid: 1em box, scales with the surrounding font-size -->

<lt-icon name="star" size="inherit" />

<!-- Fluid via custom property (wins over the size attribute) -->

<lt-icon name="star" style="--lt-icon-size: 1.4rem" />

<!-- Color is inherited from CSS -->

<lt-icon name="check-circle" style="color: var(--lt-color-success-500)" />

import { Icon } from '@latty-ds/react';

{/* Default size (md = 20px) */}

<Icon name="star" />

{/* With explicit size */}

<Icon name="arrow-right" size="lg" />

{/* Fluid: 1em box, scales with the surrounding font-size */}

<Icon name="star" size="inherit" />

{/* Color is inherited via CSS */}

<Icon name="check-circle" style={{ color: 'var(--lt-color-success-500)' }} />

Setting font-size on an icon has no effect on its own — the icon box is fixed by size. Use size="inherit" to get a 1em box that follows the text, or set --lt-icon-size to any length.

Custom icons

import { iconRegistry } from '@latty-ds/icons';

// Register a single icon
iconRegistry.registerIcon('my-logo', '<svg viewBox="0 0 24 24">...</svg>');

// Register multiple at once
iconRegistry.registerIcons({
'brand-x': '<svg>...</svg>',
'brand-y': '<svg>...</svg>',
});

API