IconsN

아이콘은 기능이나 콘텐츠를 시각적으로 표현하는 요소로, 사용자가 인터페이스를 빠르게 탐색할 수 있도록 돕습니다. 24px 그리드 · 스트로크 2px · 라운드 캡의 단순하고 현대적인 형태(Tabler Icons · MIT)를 쓰며, 기본은 Outline 이고 선택·활성 상태 강조에만 Filled 를 씁니다.

Search icons

관리자 콘솔에서 자주 쓰는 아이콘을 추린 세트입니다. 원본 Tabler 세트 5,130개는 assets/icons/ 에 그대로 있습니다. 검색 시 이름뿐 아니라 연상되는 유사한 키워드(한글 포함)를 함께 검색합니다. 아이콘을 클릭하면 이름 · 스타일 · 키워드를 보고 SVG 를 복사·다운로드할 수 있습니다. 사용 코드는 아래 Usage 를 참고하세요.

312개

검색 결과가 없습니다. 세트 밖의 아이콘은 assets/icons/ 에서 찾아 _build/icons.js 의 ICON_NAMES 에 추가하세요.

Usage

인라인 SVG 가 기본입니다(색 상속 currentColor, 크기 자유). 의미 색은 부모에 토큰(color:var(--danger))으로 줍니다. 사용 크기: 14 배지 · 16 표/페이지네이션 · 18 버튼/입력 · 20 알림 · 24 빈 화면/타일. 정적 파일이 필요하면 assets/icons/outline/{name}.svg 를 img 로, 배경·가상 요소에는 CSS mask 로 씁니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/>
  <path d="M21 21l-6 -6"/>
</svg>

// React: @jiran/ds-react 의 Icon (이 페이지의 312개, 사이트와 같은 마크업)
import { Icon } from "@jiran/ds-react";

<Icon name="search" size={18} />
<Icon name="shield" size={24} filled />
<Icon name="alert-triangle" label="경고" />  // role="img" + aria-label

// 세트 밖의 아이콘: 같은 세트의 공식 패키지
// npm i @tabler/icons-react → import { IconSearch } from "@tabler/icons-react";

<!-- 정적 파일 (색 상속 불가, 장식용) -->
<img src="assets/icons/outline/search.svg" width="18" height="18" alt="">

<!-- CSS mask: currentColor 로 색 상속 -->
.ico-search{width:18px;height:18px;background:currentColor;-webkit-mask:url("assets/icons/outline/search.svg") center/contain no-repeat;mask:url("assets/icons/outline/search.svg") center/contain no-repeat}

파일 · 이름

assets/icons/{outline|filled}/{name}.svg — Tabler 원본 이름 그대로(kebab-case). Figma 는 Tabler Icons 라이브러리, 컴포넌트 이름 = 파일 이름

사이트 소스

I("name", size, { style: "filled" }) 헬퍼(_build/icons.js). 새 아이콘은 ICON_NAMES 에 추가하면 빌드 시 인라인되고 이 갤러리와 React Icon 에 함께 나타납니다