---
title: "Icon"
description: "Display icons from popular icon libraries to enhance your content."
canonical_url: "https://ui.nuxt.com/docs/typography/icon"
last_updated: "2026-05-07"
---
# Icon

> Display icons from popular icon libraries to enhance your content.

## Usage

Use the `icon` component to display an [Icon](/docs/components/icon) in your content.

```vue
<template>
  <icon name=i-simple-icons-nuxtdotjs />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:icon{name="i-simple-icons-nuxtdotjs"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  name</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sNPI9 />
  i-simple-icons-nuxtdotjs</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseIcon component
 */
interface ProseIconProps {
  name: any;
  mode?: "svg" | "css" | undefined;
  size?: string | number | undefined;
  customize?: boolean | IconifyIconCustomizeCallback | null | undefined;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      icon: {
        base: 'size-4 shrink-0 align-sub'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Icon.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/icon.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.