reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
EventIcon
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

EventIcon

Shell

Display an event icon from a semantic key or React node with a background color.

display
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { EventIcon, POPULAR_ICONS, COLOR_PRESETS } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

EventIcon

PropTypeDefaultDescription
iconRequiredstring | React.ReactNode—semantic icon key, legacy key, 또는 React 노드 (Lucide 등)
colorstringtheme accent사용자 지정 아이콘 색상. 없으면 theme accent 토큰을 사용하고, 전달하면 전경색과 tint 배경에 적용됩니다.
size"sm" | "md" | "lg""md"아이콘 크기 (sm=20px, md=28px, lg=36px)
View test results

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • 알려진 아이콘 키를 Lucide 아이콘으로 렌더링한다
  • aria-label을 설정한다
  • 알 수 없는 문자열은 그대로 fallback 렌더링한다
  • className을 적용한다
  • color가 없으면 테마 accent 토큰을 사용한다
  • color를 전달하면 사용자 지정 색상 스타일을 적용한다

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

opt-ui

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

PreviousFileUploadFormNextConnectionIndicator