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.