Icons

About 227 wordsLess than 1 minute

2025-03-23

Overview

Use iconify icons in Markdown files.

The theme provides an <Icon /> component for using icons in Markdown and a simplified Markdown syntax for easier icon usage.

To enhance this feature, the theme recommends installing the @iconify/json dependency. It automatically parses icon data from @iconify/json, packs used icons as local resources for better access.

pnpm

pnpm add @iconify/json

yarn

yarn add @iconify/json

npm

npm install @iconify/json

Syntax

:[collect:name]:

To set icon size and color:

:[collect:name size]:
:[collect:name /color]:
:[collect:name size/color]:

Iconify has numerous icons grouped into different collect categories. Each collect has its own set of icons.

You can find collect and name at https://icon-sets.iconify.design/.

Examples

Input:

:[ion:logo-markdown]:

Output:

This is an inline syntax, allowing use with other Markdown elements in the same line.

Input:

github: :[tdesign:logo-github-filled]:
Change color: :[tdesign:logo-github-filled /#f00]:
Change size: :[tdesign:logo-github-filled 36px]:
Change size and color: :[tdesign:logo-github-filled 36px/#f00]:

Colored icon: :[skill-icons:vscode-dark 36px]:

Output:

github: Change color: Change size: Change size and color:

Colored icon: