Icons

Customize the icons displayed in your toast notifications to better match your design or context.

Default Icons

Each toast type ships with a sensible default icon:

Success: check circle
Error: x circle
Info: info
Warning: alert triangle

Disable Icons Globally

nuxt.config.ts

export default defineNuxtConfig({
  notify: {
    showIcon: false,
  },
});

Disable Icon Per Toast

AnyComponent.vue

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "No icon here",
  description: "This toast has no icon",
  showIcon: false,
});
</script>

Custom Icons

Use any icon from the Nuxt Icon library:

AnyComponent.vue

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "New notification",
  description: "You have a new message",
  icon: "i-lucide-mail",
});
</script>

Popular Icons

Communication

icons.ts

const communicationIcons = [
  "i-lucide-mail",
  "i-lucide-message-square",
  "i-lucide-phone",
  "i-lucide-video",
];

Actions

icons.ts

const actionIcons = [
  "i-lucide-download",
  "i-lucide-upload",
  "i-lucide-save",
  "i-lucide-trash",
];

Status

icons.ts

const statusIcons = [
  "i-lucide-check-circle",
  "i-lucide-x-circle",
  "i-lucide-alert-circle",
  "i-lucide-info",
];

System

icons.ts

const systemIcons = [
  "i-lucide-bell",
  "i-lucide-settings",
  "i-lucide-shield",
  "i-lucide-lock",
];

Browse all available icons at icones.js.org — search for lucide to find compatible names.