xs
sm
md
lg
xl
2xl
3xl
Every icon accepts a shared size prop. Only ChevronIcon (direction) and AlertIcon (status) take additional props.
size?'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl''md'| Prop | Type | Default |
|---|---|---|
size? | 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl' | 'md' |
directionLogoIcon
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
Directionsize?'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl''md'| Prop | Type | Default |
|---|---|---|
direction | Direction | - |
size? | 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl' | 'md' |
statusStatussize?'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl''md'| Prop | Type | Default |
|---|---|---|
status | Status | - |
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 */}