Usando
Dimensionando Ícones
Utilitários para controlar o tamanho dos ícones.
Loading...
Classes | Propriedades |
|---|---|
| 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 */ |
Uso básico
Definindo o tamanho dos ícones
Utilize os utiliários icon-{size} para controlar o tamanho do ícone.
Aprenda como customizar o tema padrão na documentação de customização do tema.
Usando utilitários do Tailwind
Usando sizes
Utilize os utilitários size-* para definir o tamanho de um ícone. Abaixo você encontrará alguns exemplos de como utilizá-los, mas para uma lista completa das opções disponíveis, veja a documentação oficial sobre tamanhos do Tailwind.