Documentation
Documentation Hub

Rounded:full

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radiusp of the box. You can also use the size prop to change the size of the box.

Show code

Rounded:lg

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radiusp of the box. You can also use the size prop to change the size of the box.

Show code

Rounded:md

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radiusp of the box. You can also use the size prop to change the size of the box.

Show code

Rounded:sm

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radiusp of the box. You can also use the size prop to change the size of the box.

Show code

Rounded:none

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radiusp of the box. You can also use the size prop to change the size of the box.

Show code

Variant:solid

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own solid colors.

Show code

Variant:pastel

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own pastel colors.

Show code

Variant:outline

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own outline colors.

Show code

Masks

Icon boxes can be displayed using SVG masks, bringing fancier shapes to your UI. Keep in mind that the mask prop is only available for the none radius.

Using svg masks will hide any overflow from your Icon box, making it unable to properly display tooltips or other attached content.
Show code

Shadows

Icon boxes can have custom color shadows. Use the none color combined with Tailwind CSS utility classes to create your own shadow colors.

Show code

#<BaseIconBox>

Properties¶

rounded
The radius of the icon.

@since

2.0.0

@default

'sm'

Show example
size
The size of the icon.

@default

'xs'

Show example
mask
Applies an svg mask from the available presets. (needs rounded to be set to `none`).
Show example
variant
The variant of the box.

@since

2.0.0 default 'solid'

Show example
color
The color of the box.

@default

'default'

Show example
bordered
Whether the icon is bordered.
Show example

Slots¶

#default
Show example