### 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.

<!--code-->

```vue
<template>
  <VIconBox
    size="medium"
    color="primary"
    rounded
  >
    <VIcon icon="lucide:award" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="info"
    rounded
  >
    <VIcon icon="lucide:chrome" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="success"
    rounded
  >
    <VIcon icon="lucide:clock" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="warning"
    rounded
  >
    <VIcon icon="lucide:coffee" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="danger"
    rounded
  >
    <VIcon icon="lucide:home" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="purple"
    rounded
  >
    <VIcon icon="lucide:lock" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="yellow"
    rounded
  >
    <VIcon icon="lucide:moon" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="orange"
    rounded
  >
    <VIcon icon="lucide:phone" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="green"
    rounded
  >
    <VIcon icon="lucide:paperclip" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="red"
    rounded
  >
    <VIcon icon="lucide:smile" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="blue"
    rounded
  >
    <VIcon icon="lucide:shield" />
  </VIconBox>
</template>
```

<!--/code-->

<!--example-->

<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
    <VIconBox size="medium" color="primary" rounded>
        <VIcon icon="lucide:award"/>
    </VIconBox>
    <VIconBox size="medium" color="info" rounded>
        <VIcon icon="lucide:chrome"/>
    </VIconBox>
    <VIconBox size="medium" color="success" rounded>
        <VIcon icon="lucide:clock"/>
    </VIconBox>
    <VIconBox size="medium" color="warning" rounded>
        <VIcon icon="lucide:coffee"/>
    </VIconBox>
    <VIconBox size="medium" color="danger" rounded>
        <VIcon icon="lucide:home"/>
    </VIconBox>
    <VIconBox size="medium" color="purple" rounded>
        <VIcon icon="lucide:lock"/>
    </VIconBox>
    <VIconBox size="medium" color="yellow" rounded>
        <VIcon icon="lucide:moon"/>
    </VIconBox>
    <VIconBox size="medium" color="orange" rounded>
        <VIcon icon="lucide:phone"/>
    </VIconBox>
    <VIconBox size="medium" color="green" rounded>
        <VIcon icon="lucide:paperclip"/>
    </VIconBox>
    <VIconBox size="medium" color="red" rounded>
        <VIcon icon="lucide:smile"/>
    </VIconBox>
    <VIconBox size="medium" color="blue" rounded>
        <VIcon icon="lucide:shield"/>
    </VIconBox>
</div>

<!--/example-->