Icon Components

Icons play a central part of every web and mobile application. They help users understanding your features in a glimpse. Explore Vulk icons.

Components Open Docs
SizeRoundedColorsBorder

Icon Box

Icon Box sizes recap


<template>
  <IconBox size="small">
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium">
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
</template>

Rounded Box

Rounded Box sizes recap


<template>
  <IconBox size="small" rounded>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox rounded>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium" rounded>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
</template>

Box Colors

Icon Box colors recap


<template>
  <IconBox size="medium" color="primary">
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium" color="success">
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium" color="info">
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
</template>

Bordered Box

Bordered box recap


<template>
  <IconBox size="medium" color="primary" bordered>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium" color="success" rounded bordered>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
  <IconBox size="medium" color="info" bordered>
    <i class="iconify" data-icon="ion:gift-outline"></i>
  </IconBox>
</template>