Icon boxes can have different sizes and shapes. Use the rounded shape prop value to change the shape of the box. You can also use the size prop to change the size of the box.
Show codeHide code
Icon boxes can have different sizes and shapes. Use the curved shape prop value to change the shape of the box. You can also use the size prop to change the size of the box.
Show codeHide code
Icon boxes can have different sizes and shapes. Use the circle shape prop value to change the shape of the box. You can also use the size prop to change the size of the box.
Show codeHide code
Icon boxes can have different colors. Use the flavor and the color props to change the color and style of the box.
Show codeHide code
Icon boxes can have different colors. Use Tailwind CSS utility classes to create your own solid colors.
Show codeHide code
Icon boxes can have different colors. Use the flavor and the color props to change the color and style of the box.
Show codeHide code
Icon boxes can have different colors. Use Tailwind CSS utility classes to create your own pastel colors.
Show codeHide code
Icon boxes can have different colors. Use the flavor and the color props to change the color and style of the box.
Show codeHide code
Icon boxes can have different colors. Use Tailwind CSS utility classes to create your own outline colors.
Show codeHide code
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 straight shape.
Show codeHide code
Icon boxes can be have different color shadows. Use Tailwind CSS utility classes to create your own shadow colors.
Show codeHide code
sizeShow exampleHide example
colorShow exampleHide example
shapeShow exampleHide example
maskShow exampleHide example
flavorShow exampleHide example
bordered