Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Colors
  • Helpers
  • Content
  • Table
  • Icons
  • Interaction
  • VDropdown
  • VLoader
  • VPlaceload
  • VPlaceloadText
  • VPlaceloadAvatar
  • VMessage
  • VModal
  • VProgress
  • VTootlip
  • Buttons
  • Forms
  • Switches
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap
  • VSnack
  • VTag
  • VFlex
  • VGrid
  • VBreadcrumb
  • VTabs
  • VFlexPagination
  • VFlexTable
  • Accordions
  • Cards
  • Placeholders
  • Addons

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • VIconBox

VIconBox

The Vuero <VIconBox /> component let you display icons in a fancy and colored way. Box sizes can be controled with the size prop. Available sizes are small, medium, large, big and xl. See code for more details about usage.

Box colors

The Vuero <VIconBox /> component can have different colors. You can change the color by passing a value to the color prop. Available values are: primary, info, success, warning, danger, purple, yellow, orange, green, red, or blue.

Box border

The Vuero <VIconBox /> component can have a thick border. You can add a border by simply adding the bordered prop to the component. See the code example for more details.

Rounded box

The Vuero <VIconBox /> component can have a rounded shape. You can make icons rounded by simply adding the rounded prop to the component. See the code example for more details.

Rounded border

The Vuero <VIconBox /> component can have a thick border. You can add a border by simply adding the bordered and rounded props to the component. See the code example for more details.

Lucide Icons

The Vuero <VIconBox /> component works also very well with the Lucide Icons icon set. Use the same markup and just replace the existing icons with some from Lucide Icons.

Font Awesome

The Vuero <VIconBox /> component works also very well with the Font Awesome icon set. Use the same markup and just replace the existing icons with some from Font Awesome.

<VIconBox> Props

NameDefaultType
:bordered
:color
:rounded
:size

<VIconBox> Slots

NameType
#default