Icons

Alixan UI examples use Lucide Icons, but the components accept regular slots, so you can use any icon library you like.

Browse the full icon catalog in Lucide Icons.

Installation

npm install @lucide/vue

Lucide Icons

<script setup lang="ts">
import { Bell, Search } from '@lucide/vue'
</script>

<template>
  <Button>
    <template #leading>
      <Search class="size-5" />
    </template>
      Search
	</Button>

  <IconButton>
    <Bell />
  </IconButton>
</template>

Other Libraries

Use Nuxt MDI, custom SVG components, or any other icon source. If it renders inside a slot, it works.

Nuxt MDI provides Material Design Icons as Nuxt components. See the Nuxt MDI module documentation.

npx nuxi module add nuxt-mdi