vuepress-theme-plume/docs/en/guide/features/icon.md

title, icon, createTime, permalink

title	icon	createTime	permalink
Icons	raphael:smile2	2025/10/08 10:45:47	/en/guide/features/icon/

Overview

The theme supports icons from the following sources:

• iconify - Supported by default
• iconfont - Optional
• fontawesome - Optional

Icons are used in the same way across the following theme features:

• Navbar Icons
• Sidebar Icons
• File Tree Icons
• Code Group Title Icons

Provides syntax sugar and component support:

Markdown Icon Syntax Sugar Support{.read-more}

Icon Component Support{.read-more}

::: tip Theme Optimization for Icons The theme employs the same parsing strategy internally for all the different ways of using icons mentioned above. Even if you use the same icon in different locations, the same icon resources will not be loaded repeatedly. :::

Configuration

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

export default defineUserConfig({
  theme: plumeTheme({
    markdown: { // [!code ++:3]
      icon: { provider: 'iconify' } // Supported by default
    }
  })
})

Configuration Options

provider

• Type: 'iconify' | 'iconfont' | 'fontawesome'
• Default: 'iconify'

Icon provider

prefix

• Type: string

• Default: '' (Different icon providers have different default values)

• Details:

  Icon prefix

  • When provider is iconify, defaults to ''. Set the iconify collection as prefix, e.g., mdi.

  • When provider is iconfont, defaults to 'iconfont icon-'

  • When provider is fontawesome, defaults to 'fas'. Optional values are:

    type FontAwesomePrefix
      = | 'fas' | 's' // fa-solid fa-name
        | 'far' | 'r' // fa-regular fa-name
        | 'fal' | 'l' // fa-light fa-name
        | 'fat' | 't' // fa-thin fa-name
        | 'fads' | 'ds' // fa-duotone fa-solid fa-name
        | 'fass' | 'ss' // fa-sharp fa-solid fa-name
        | 'fasr' | 'sr' // fa-sharp fa-regular fa-name
        | 'fasl' | 'sl' // fa-sharp fa-light fa-name
        | 'fast' | 'st' // fa-sharp fa-thin fa-name
        | 'fasds' | 'sds' // fa-sharp-duotone fa-solid fa-name
        | 'fab' | 'b' // fa-brands fa-name
    

assets

• Type: (string | FontAwesomeAssetBuiltin)[] | string | FontAwesomeAssetBuiltin

  type FontAwesomeAssetBuiltin = 'fontawesome' | 'fontawesome-with-brands'
  

• Default: undefined

• Details:

  • For iconify: No configuration needed;
  • For iconfont: Set to the resource URL of iconfont;
  • For fontawesome: Set to the resource URL of fontawesome. Optional values are fontawesome or fontawesome-with-brands, or custom resource URLs.

size

• Type: string | number

• Default: 1em

• Details:

  Default icon size

color

• Type: string

• Default: 'currentColor'

• Details:

  Default icon color