Overview

The <Icon /> component loads icons from different icon libraries based on the markdown.icon configuration.

The theme also provides markdown syntax support. Click to learn more

Configuration

.vuepress/config.ts

import { 
defineUserConfig
 } from 'vuepress'
import { 
plumeTheme
 } from 'vuepress-theme-plume'

export default 
defineUserConfig
({
  
theme
: 
plumeTheme
({
    
markdown
: { 
      
icon
: { 
provider
: 'iconify' } // Enabled by default
    }
  })
})

interface IconOptions {
  /**
   * Icon provider
   */
  provider: 'iconify' | 'iconfont' | 'fontawesome'
  /**
   * Default icon prefix. Different providers have different default prefixes
   * - iconify - Default: `''`
   * - iconfont - Default: `iconfont icon-`
   * - fontawesome - Default: `fas`
   */
  prefix?: string
  /**
   * Icon asset links
   */
  assets?: IconAssetLink | IconAssetLink[]
  size?: string | number
  color?: string
}

Props

nameOptionalstring

Icon name. When markdown.icon.prefix has a value, the prefix in name can be omitted.

colorOptionalstring

'currentcolor'

Icon color.

sizeOptionalstring

'1em'

Icon size.

Examples

Input:

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />

Output:

• home -
• vscode -
• twitter -

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25
• 14973-feat: add multiple provider support for icon, close #568 (#596)on 5/16/25
• d1496-docs: update docson 4/30/25
• 0fd6c-refactor(theme): improve types and flat config (#524)on 3/15/25
• e3b1c-docs: improve docson 8/18/24