아이콘 라이브러리

packages/components/src/icons.ts에 등록된 아이콘 전부를 렌더한 목록이에요. 이 페이지는 레지스트리를 빌드 시점에 그대로 불러오기 때문에, 새 아이콘을 등록하면 다음 배포에서 이 목록도 자동으로 같이 늘어나요 — 별도로 옮겨 적을 필요가 없습니다.

셀을 클릭하면 이름이 클립보드에 복사돼요. 화면에서는 이 이름을 그대로 $icon('이름')에 넣습니다.

<span class="ds-ico w-4 h-4 text-label-normal" x-html="$icon('ic-folder')"></span>

미리보기 크기

171 / 171개

브랜드 자산 (logo-*)

위 아이콘과 달리 currentColor가 아니라 하드코딩 hex(그라디언트 · 워드마크)를 쓰는 예외예요 — 브랜드 규칙 참고.

packages/components/src/icons.ts 레지스트리를 빌드 시점에 그대로 불러와 렌더해요 — 새 아이콘을 등록하면 이 페이지도 다음 배포에서 자동으로 같이 늘어나요(따로 옮겨 적지 않아도 됩니다). 실제 화면에서는 <span class="ds-ico w-4 h-4" x-html="$icon('이름')"></span>처럼 크기·색을 래퍼가 갖는 형태로 씁니다. 크기 토글로 12~24px을 오가며 각 아이콘이 작은 크기에서도 뭉개지거나 획이 너무 가늘어지지 않는지 확인해 보세요 — 굵기는 16px 표시에서 1.33px로 전부 같습니다(ic-spinner만 굵은 링이 목적이라 예외예요). 이 페이지에서 나란히 놓고 보다가 굵기가 5가지로 갈려 있던 걸 찾아 통일했어요.

사용 규칙

아이콘을 새로 그리는 게 아니라 고르는 화면이라면 이 페이지에서 이름을 찾고, 화면 쪽 마크업·크기·색 규칙은 .claude/rules/frontend/design-system-docs.md가 가리키는 CLAUDE.md의 "아이콘은 레지스트리에서" 절이 정본이에요. 요약하면:

• 인라인 <svg>를 직접 그리지 않고 .ds-ico 래퍼 + $icon('이름')으로 불러온다 (pnpm check:icons가 새로 추가된 인라인 <svg>를 막아요).
• 크기·색은 래퍼(w-4 h-4, text-*)가 갖고, 글리프 자체는 currentColor만 쓴다 — 위 미리보기의 크기 토글로 각 아이콘이 12~24px 전 구간에서 뭉개지지 않는지 확인할 수 있어요.
• 새 아이콘을 등록할 땐 packages/components/src/icons.ts에 자립형(스스로 완결된) SVG로 추가하고 pnpm icons:build로 packages/static/icons/*.svg 파생본을 같이 갱신한다.
• 브랜드 자산(logo-*)은 위 목록 아래 별도 절로 분리돼 있어요 — currentColor가 아니라 하드코딩 hex(그라디언트·워드마크)를 쓰는 유일한 예외라서 나머지 아이콘과 성격이 달라요. 자세한 규칙은 브랜드 문서를 참고하세요.