Icons
foundationこのデザインシステムに同梱されているアイコンの一覧です。61 種類を、どの画面でも同じ見た目で使えます。
サイズ
.icon-xs (12) / .icon-sm (16) / .icon-md (20) / .icon-lg (24) / .icon-xl (32)
xs
sm
md
lg
xl
着色
currentColor を継承するので text-* ユーティリティで色付け可能
同梱されているアイコン
アイコンが足りない場合は scripts/build-icons.mjs の ICONS 配列に追加
info
check-circle
alert-triangle
alert-circle
x-circle
plus
minus
x
check
pencil
trash-2
copy
download
upload
refresh-cw
send
chevron-up
chevron-down
chevron-left
chevron-right
chevrons-up-down
arrow-left
menu
more-horizontal
more-vertical
home
file
files
folder
folder-cog
link
external-link
image
building
database
user
users
smile
shield-check
medal
settings
help-circle
log-in
log-out
search
filter
hash
list
layout-grid
bold
italic
underline
eye
eye-off
lock
calendar
clock
mail
bell
phone
message-circle
使い方
consumer のプロダクトコードから
Vite / Next.js 等のバンドラ
import iconsUrl from "@light-right/design-system/icons";
<svg class="icon icon-md">
<use href={`${iconsUrl}#lucide-search`} />
</svg>
vanilla HTML
<svg class="icon icon-md"> <use href="./node_modules/@light-right/design-system/dist/icons.svg#lucide-search"></use> </svg>
機能
このコンポーネントの用途
Lucide スプライトからアイコンを表示するヘルパー。表示とサイズだけを担う。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓サイズは icon-{xs,sm,md,lg,xl}。色は currentColor 継承なので text-* で着色。
- ✓<use href="...#lucide-名前"> で参照する。
- ✓外部スプライトを参照できない環境（単一 HTML ファイル・file:// 表示・メール等）では、 <symbol> を文書内に一度定義して <use href="#lucide-名前"> で参照する。symbol の markup は MCP の get_icon("名前") が返す（自分でパスを描いたり icons.svg を grep したりしない）。
NG
- ✕色やサイズを #hex/px で直書きしない → text-* と icon-* を使う。
- ✕意味のあるアイコンを無ラベルで置かない → 必要なら aria-label を併記。
- ✕class="icon" だけでサイズクラスを省かない → icon-{xs,sm,md,lg,xl} を必ず併記。 .icon 単体にはサイズが無く、省くと SVG 既定の 300×150px で描かれてレイアウトを突き抜ける。