k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
ナビゲーションを開く
Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

Components

Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons

Icons

k8ordo UIが提供するアイコン一覧

Storybookで確認

インポート

サイズ

xs

sm

md

lg

xl

2xl

3xl

使い方

Props

すべてのアイコンは共通でsizeを受け取ります。向きを持つChevronIconと、ステータスを表すAlertIconだけは追加のpropsがあります。

size?
Type: 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'
Default: 'md'
PropTypeDefault
size?'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl''md'

ChevronIcon

direction
Type:

LogoIcon

CloseIcon

CheckIcon

ChevronIcon

PlusIcon

MinusIcon

LinkIcon

ExternalLinkIcon

CopyIcon

SendIcon

MailIcon

ViewIcon

ViewOffIcon

AlertIcon (info)

AlertIcon (success)

AlertIcon (warning)

AlertIcon (error)

AccessibilityIcon

AIIcon

AtomIcon

BlogIcon

ColorContrastIcon

ColorInfoIcon

ColorScaleIcon

DarkModeIcon

LightModeIcon

FormIcon

HistoryIcon

RefreshIcon

ListIcon

LocationIcon

MixedColorIcon

NavigationMenuIcon

NewsIcon

PaletteIcon

PrepareIcon

PublishDateIcon

RSSIcon

ShieldCheckIcon

SlideIcon

SparklesIcon

SubscribeIcon

TableIcon

TagIcon

UpdateDateIcon

GoodIcon

BadIcon

InformativeIcon

ShallowIcon

InterestingIcon

BoringIcon

EasyIcon

DifficultIcon

GitHubIcon

TwitterIcon

Direction
Default: -
size?
Type: 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'
Default: 'md'
PropTypeDefault
directionDirection-
size?'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl''md'

AlertIcon

status
Type: Status
Default: -
size?
Type: 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'
Default: 'md'
PropTypeDefault
statusStatus-
size?'xs'|'sm'|'md'|'lg'|'xl'|

QiitaIcon

'2xl'
|'3xl'
'md'
import { CloseIcon, CheckIcon } from '@k8ordo/ui';
<CheckIcon size="xs" />  {/* 12px */}
<CheckIcon size="sm" />  {/* 16px */}
<CheckIcon size="md" />  {/* 24px (default) */}
<CheckIcon size="lg" />  {/* 32px */}
<CheckIcon size="xl" />  {/* 40px */}
<CheckIcon size="2xl" /> {/* 48px */}
<CheckIcon size="3xl" /> {/* 56px */}