Usage
How to Size Icons
Utilities for controlling the size of an icon.
Loading...
Class | Properties |
|---|---|
| icon-xs | size-2 width:0.5rem /* 8px */ height:0.5rem /* 8px */ |
| icon-sm | size-4 width:1rem; /* 16px */ height:1rem /* 16px */ |
| icon-base | size-5 width:1.25rem; /* 20px */ height:1.25rem /* 20px */ |
| icon-lg | size-6 width:1.5rem; /* 24px */ height:1.5rem /* 24px */ |
| icon-xl | size-7 width:1.75rem; /* 28px */ height:1.75rem /* 28px */ |
| icon-2xl | size-8 width:2rem; /* 32px */ height:2rem /* 32px */ |
| icon-3xl | size-9 width:2.25rem; /* 36px */ height:2.25rem /* 36px */ |
| icon-4xl | size-10 width:2.5rem; /* 40px */ height:2.5rem /* 40px */ |
| icon-5xl | size-11 width:2.75rem; /* 44px */ height:2.75rem /* 44px */ |
| icon-6xl | size-12 width:3rem; /* 48px */ height:3rem /* 48px */ |
| icon-7xl | size-14 width:3.5rem; /* 56px */ height:3.5rem /* 56px */ |
Basic usage
Setting the icon size
Use the icon-{size} utilities to control the size of an icon.
Learn more about customizing the default theme size in the theme customization documentation.
Using Tailwind utilities
Using sizes
Use the size-* utilities to control the size of an icon. There are a few samples of how to use it below, but for a full list of available options, refer to the official Tailwind documentation for sizes.