Available Icons

Properties4

Is BaseNo

Iconi-lucide-smile

Order5

Tags #icons #ui #design

Lithos uses Lucide icons throughout the documentation interface. Icons are referenced using the i-lucide-{name} format in frontmatter and MDC components.

Icon Browser

Showing 343 of 343 icons. Click to copy.

Usage Examples

In Frontmatter

---
title: My Page
icon: i-lucide-book-open
navigation:
  icon: i-lucide-book-open
---

In MDC Components

::u-button{icon="i-lucide-download"}
Download
::

::callout{icon="i-lucide-info"}
This is an info callout with a custom icon.
::

In Vue Components

<template>
  <UIcon name="i-lucide-settings" class="size-5" />
  <UButton icon="i-lucide-plus" label="Add Item" />
</template>

Icon Categories

Category	Common Icons
Navigation	`arrow-`, `chevron-`, `menu`, `x`, `search`
Actions	`plus`, `minus`, `check`, `edit`, `trash`, `copy`, `save`
Files	`file-`, `folder-`, `archive`, `package`
Content	`book-`, `text`, `code`, `list-`, `heading-*`
Users	`user-*`, `users`, `contact`
Status	`info`, `alert-*`, `check-circle`, `x-circle`
Media	`image`, `camera`, `music`, `video`
Development	`git-*`, `terminal`, `bug`, `code`

Resources

Lucide Icons - Full icon library and documentation
Nuxt UI Icons - How icons work in Nuxt UI