아이콘 (Icon)

아이콘은 기능과 상태, 정보의 의미를 직관적으로 전달하는 시각 요소예요. 복잡한 내용을 간결하게 표현해 사용자의 이해와 탐색을 돕고, 버튼·메뉴·알림·상태 표시를 빠르게 구분하게 해요. v2에서는 이름과 코드포인트를 JSON 매니페스트에서 생성하며, 웹에서는 생성된 폰트 CSS를 함께 불러와요.

Usage

import { Icon } from "podo-ui/react";import "podo-ui/icons.css";
<Icon name="search" decorative={false} aria-label="검색" />

아이콘 에셋 (icon)

아이콘은 24px 그리드를 기준으로 제작하고, 선형 스타일과 1.2px 스트로크로 형태·두께·시각적 무게를 일관되게 맞춰요. 최신 Figma 원본의 비어 있지 않은 아이콘 138개를 모두 포함하고, 기존 런타임 호환 이름과 겹치는 15개는 같은 코드포인트로 합쳤어요. 아래 갤러리는 호환 전용 아이콘까지 포함한 매니페스트 152개 전체이며, .fig 동기화와 podo build를 실행하면 목록·타입·CSS·폰트가 함께 갱신돼요.

  • airplane
  • alert-exclamation
  • alert-question
  • align-center
  • align-gap-horizontal
  • align-gap-vertical
  • align-horizontal-center
  • align-horizontal-left
  • align-horizontal-right
  • align-left
  • align-right
  • align-vertical-bottom
  • align-vertical-middle
  • align-vertical-top
  • arrow-down
  • arrow-left
  • arrow-return-backward
  • arrow-return-forward
  • arrow-right
  • arrow-up
  • arrow-up-right
  • bold
  • briefcase
  • building
  • bullet-list
  • calendar
  • call
  • camera
  • car
  • card
  • cart
  • check
  • check-check-small
  • check-circle
  • chevron-double-down
  • chevron-double-left
  • chevron-double-right
  • chevron-double-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • click
  • clipboard
  • close
  • code
  • coffee
  • compass
  • copy
  • dark
  • database
  • double-arrow-arrow-right-left
  • double-arrow-arrow-up-down
  • edit
  • edit-home
  • eraser
  • external
  • eye
  • eye-eye-closed
  • eye-eye-off
  • file
  • file-file-none
  • file-io-export
  • file-io-import
  • font-color
  • forbid
  • globe
  • gps
  • graph
  • grid-menu
  • headphones
  • headphones-headphones-line
  • heart
  • highlight
  • hr
  • image
  • img
  • inbox
  • indent
  • indent-outdent
  • info
  • italic
  • light
  • line-hozion
  • lineheight
  • link
  • link-unlink
  • list-ol
  • list-ul
  • lock
  • lock-unlock
  • log-in
  • log-out
  • mail-receipt
  • margin-horizontal
  • margin-vertical
  • menu
  • paperclip
  • pc
  • pencil
  • pin
  • plus
  • printer
  • quote
  • receipt
  • redo
  • refresh
  • repeat
  • reserve
  • rss
  • save
  • search
  • section
  • send
  • send-send-right
  • settings
  • share
  • star
  • strikethrough
  • table
  • temperature
  • text
  • text-align-center
  • text-align-left
  • text-align-right
  • threedots-threedots-horizontal
  • threedots-threedots-vertical
  • time
  • trash
  • trend-down
  • trend-up
  • triangle-arrow-down
  • triangle-arrow-left
  • triangle-arrow-right
  • triangle-arrow-up
  • twinkle
  • underline
  • undo
  • unfold
  • upload
  • upload-download
  • user
  • user-user-minus
  • user-user-plus
  • user-users
  • video
  • volume-mute
  • volume-sound
  • wristwatch
  • youtube
  • zoom-in
  • zoom-out

크기 (size)

Figma 원본은 사용 위치와 정보 중요도에 따라 12·16·20·24·32·40px 체계를 정의해요. 현재 v2 Icon 공개 API는 그중 16px(sm)·24px(md)·32px(lg)를 지원하며, 작은 아이콘은 보조 정보와 밀도 높은 UI에, 큰 아이콘은 주요 기능과 강조 영역에 사용해요.

base
propertiessm (16)md (24)lg (32)

속성 (props)

장식 아이콘은 기본적으로 접근성 트리에서 숨겨져요. 의미를 전달하는 아이콘은 decorative={false}와 aria-label을 함께 지정하세요.

PropTypeDefault설명
namestring—생성된 아이콘 이름
size"sm" | "md" | "lg""md"글리프 크기
decorativebooleantrue보조기기에서 장식 아이콘 숨김