Sizes
Standard sizes for icons, avatars and controls.
Draft
The values shown here are conceptual and may change.
icon
sm 16
md 20
lg 24
avatar
sm 32
md 40
lg 56
control
sm 32
md 44
lg 52
export const sizes = {
icon: { sm: 16, md: 20, lg: 24 },
avatar: { sm: 32, md: 40, lg: 56 },
control: { sm: 32, md: 44, lg: 52 },
} satisfies Sizes;control sets the height of buttons, inputs and similar controls. The md size matches the minimum touch target.
Usage
<Icon name="chevron-right" size={tokens.sizes.icon.md} />