Menu
Documentation
v4.0.0-beta.4

Icon box

<BaseIconBox /> · A versatile icon container.

View SourceOpen Issue
vue
<template>
  <BaseIconBox>
    <Icon name="solar:home-smile-angle-linear" class="size-6" />
  </BaseIconBox>
</template>

Features

  • Simple to use
  • Fully customizable
  • Masks and sizes support

Anatomy

This component any content as a child, though it is preferable to use it as an icon container. You can customize the icon box's visual style by using the available props.

vue
<template>
  <BaseIconBox>
    <!-- Icon here -->
  </BaseIconBox>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
variant
default:"default"
"default" | "primary" | "dark" | "none" | "muted"

The variant of the box.

size
default:"xs"
"md" | "xs" | "sm" | "lg" | "xl" | "2xl"

The size of the icon.

rounded
default:"sm"
"none" | "md" | "sm" | "lg" | "full"

The radius of the icon.

mask
default:-
"hex" | "hexed" | "deca" | "blob" | "diamond"

Applies an svg mask from the available presets. (needs rounded to be set to `none`).

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any

Examples

Size

Use the size prop to control the size of the icon box.

vue
<template>
  <BaseIconBox
    size="md"
  >
    <Icon name="solar:home-smile-angle-linear" class="size-5" />
  </BaseIconBox>
</template>

Border radius

Use the rounded prop to control the border radius of the icon box.

vue
<template>
  <BaseIconBox
    rounded="md"
  >
    <Icon name="solar:home-smile-angle-linear" class="size-5" />
  </BaseIconBox>
</template>

Variant

Use the variant prop to control the visual style of the icon box.

vue
<template>
  <BaseIconBox
    variant="default"
  >
    <Icon name="solar:home-smile-angle-linear" class="size-5" />
  </BaseIconBox>
</template>

Solid color

Use the none variant to create your own set of solid color icon boxes.

vue
<template>
  <BaseIconBox
    variant="none"
    class="bg-green-500 text-white"
  >
    <Icon name="solar:home-smile-angle-linear" class="size-5" />
  </BaseIconBox>
</template>

Pastel color

Use the pastel variant and the color prop to change the color of the icon box.

vue
<template>
  <BaseIconBox
    variant="pastel"
    color="primary"
  >
    <Icon name="ph:game-controller-duotone" class="size-5" />
  </BaseIconBox>
</template>

Outline color

Use the outline variant and the color prop to change the color of the icon box.

vue
<template>
  <BaseIconBox
    variant="outline"
    color="primary"
  >
    <Icon name="ph:game-controller-duotone" class="size-5" />
  </BaseIconBox>
</template>

Mask

Use the mask prop combined to the rounded prop set to none to display an svg mask.

vue
<template>
  <BaseIconBox
    size="md"
    rounded="none"
    mask="blob"
    variant="pastel"
    color="success"
  >
    <Icon name="ph:leaf-duotone" class="size-5" />
  </BaseIconBox>
</template>

Heading

Input