dashbook
Brand / Iconography

Iconography.

Lucide, exclusively. Stroke 1.5. Inherits currentColor. Sized 12 / 16 / 20 / 24. No emoji, no PNG icons, no second library.

The set

A representative slice — the codebase actually uses ~80 distinct Lucide icons. Add to this set by import; never re-trace.

refresh-cw
triangle-alert
trending-up
key-round
mail
search
plus
chevron-down
Sizes
size-3 12px Inside small buttons, table chevrons
size-4 16px Workhorse — buttons, inline labels, chips
size-5 20px Sidebar nav items
size-6 24px Empty-state hero icons
Tones
fg
fg-muted
brand
destructive
Usage
svelte 
<script lang="ts">
	import TrendingUp from '@lucide/svelte/icons/trending-up';
</script>

<TrendingUp size={16} strokeWidth={1.5} />
Brand marks

The dash.fi wordmark and app icon are the only custom marks in the system. Everything else is Lucide, by import. See Logo for downloads and rules.

Do · Don't
Do

Use Lucide exclusively. Imported via @lucide/svelte. Stroke 1.5 (override the default 2).

Do

Inherit color from currentColor. Tone via text utilities (text-fg-muted, text-brand, text-destructive).

Do

Match icon size to context: 12px in tight UI, 16px default, 20px for nav, 24px for empty states.

Don't

Don't use emoji anywhere. Not in labels, not in toasts, not in empty states. Ever.

Don't

Don't introduce a second icon library. No Heroicons, no Phosphor, no custom set.

Don't

Don't fill icons. The system is stroked. Filled icons read as a different brand.