Icons

Icons of this library are based on xicons ionicons5.

<script lang="ts" setup>
  import {
    IconAtOutline,
    IconTvOutline,
    IconAddOutline,
    IconBagOutline,
    IconBanOutline,
  } from 'daisyui-vue';
</script>

<template>
  <div class="space-x-2">
    <IconAtOutline class="text-sm" />
    <IconTvOutline class="text-base" />
    <IconAddOutline class="text-xl" />
    <IconBagOutline class="text-2xl" />
    <IconBanOutline class="text-3xl" />
  </div>
</template>
vue

xicons is also recommended for more icons.

<script setup lang="ts">
  import {
    Info24Regular,
    Warning24Regular,
    CheckmarkCircle24Regular,
    ErrorCircle24Regular,
    Alert24Regular,
  } from '@vicons/fluent';
  import { Icon } from 'daisyui-vue';
</script>

<template>
  <div class="space-x-2">
    <Icon :size="24"> <Info24Regular /></Icon>
    <Icon :size="28"> <Warning24Regular /></Icon>
    <Icon :size="32"> <CheckmarkCircle24Regular /></Icon>
    <Icon :size="36"> <ErrorCircle24Regular /></Icon>
    <Icon :size="40"> <Alert24Regular /></Icon>
  </div>
</template>
vue

Icon

Attributes

namedescriptiontypedefault
coloricon colorstring-
sizeicon sizenumber, string-
tagwrap elementstringspan

Slots

namedescription
defaultsvg children