Back to DocsDesign System

Icon System

Meridian ships a hand-crafted icon set tuned for the violet-to-pink brand palette. Every icon is a raw SVG path — no icon library dependency, no runtime overhead.

Shield
Key
Zap
Lock

Usage

Import icons from @/components/icons. Each icon accepts size and className props. The default stroke color inherits from the parent text color, so icons automatically match the brand gradient when placed inside a violet-to-pink context.

import { Shield } from '@/components/icons';

<Shield size={24} className="text-[#8B5CF6]" />

Adding Icons

Drop a 24×24 SVG path into the registry. Keep strokes at 1.5px, round caps and joins. No fills — the system is stroke-only for crisp rendering at all sizes.