Icons

Use Icon to render any icon by name from the shared ICONS map — it mixes Lucide icons with a few custom SVGs (like nav-arrow and x-circle-solid) behind a single lookup so consumers never import icon libraries directly. IconGrid lays out icons in a responsive grid, and IconGallery composes it into a searchable, click-to-copy icon browser for docs.

<script setup lang="ts">
import { Icon } from "@/components/ui/icons";
</script>

<template>
  <Icon icon="shield-check" size="lg" class="text-primary" />
</template>

Add new icons by dropping a .vue file in IconSet/ and registering it in icons.ts; the IconKey type is derived from that map, so new entries are type-safe everywhere Icon is used.