Button Icon Sizes 1 - Outline icon button sizes

Pro

Outline icon buttons at extra-small, small, default, and large icon sizes.
Shadcn Button Icon Sizes 1 component

Component data

ID
button/button-icon-sizes-1
Access
pro
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Button Icon Sizes 1 component design & features

This example compares all four shadcn Button icon sizes side by side using the outline variant and icon-xs, icon-sm, icon, and icon-lg.

Use smaller icon sizes in dense tables and toolbars, and larger sizes when the tap target needs more prominence on touch interfaces.