⛔ DEPRECATION NOTICE

⛔ This extension has been deprecated and is no longer being maintained.

React-Icons Snippets

This extension includes 54,168 React-Icons snippets for VS Code.

Build apps with 18,056 icons—across multiple icon libraries—all at your fingertips.

This extension supports:

🔣 All react-icons icons. The complete picture.
📦 import snippets, including all-files imports, for quick and easy importing.
🗃️ Libraries organized using a prefix, such as ri:fa for Font Awesome or ri:im for IcoMoon.

Just type ri and press Ctrl+Space for autocompletion. VS Code will autocomplete the icon you need.

Use a library prefix to filter by library. For example, ri:fa:book, ri:im:user, ri:wi:cloud, etc.

Demo

Read below for more information.

📚 Supported languages (file extensions)

JavaScript (.js)
JavaScript React (.jsx)
TypeScript (.ts)
TypeScript React (.tsx)

📖 Snippets

All snippets start with ri for React-Icons, followed by the icon library prefix.

There are 54,168 snippets available for icons and imports. Read more on each below.

Library Prefixes

Icons are grouped by library using a prefix. See the table below for the prefix to use:

Library	Prefix	# Icons
Ant Design Icons	`ai`	788
Bootstrap Icons	`bs`	668
BoxIcons	`bi`	738
css.gg	`cg`	704
Devicons	`di`	192
Feather	`fi`	286
Flat Color Icons	`fc`	329
Font Awesome	`fa`	1559
Game Icons	`gi`	3786
Github Octicons Icons	`go`	184
Grommet-Icons	`gr`	562
Heroicons	`hi`	452
IcoMoon Free	`im`	491
Ionicons 4	`io4`	696
Ionicons 5	`io5`	1300
Material Design Icons	`md`	959
Remix Icon	`ri`	2172
Simple Icons	`si`	1316
Typicons	`ti`	336
VS Code Icons	`vsc`	319
Weather Icons	`wi`	219

Icon Component Snippets

All react-icons components are supported.

For example, ri:fa:book, ri:im:user, ri:wi:cloud, etc.

The React Icons website has a searchable directory of all available icons.

Import Snippets

Component import snippets are available for all react-icons components.

All import snippets begin with ri:import.

For example, ri:import:fa:book will import FaBook from Font Awesome via the statement: import { FaBook } from 'react-icons/fa';.

Import snippets are also available for all-files, and these snippets all end with :all-files.

For example, ri:import:fa:book:all-files will import FaBook from Font Awesome via the statement: import { FaBook } from '@react-icons/all-files/fa/FaBook';.

Imports

Release Notes

[1.0.0] - 2021-06-07

Initial release of React-Icons Snippets.

[1.0.1] - 2021-06-07

Add gifs, update docs.

[1.0.2] - 2021-06-07

Refactor import prefixes. Update docs.

[1.0.3] - 2021-06-07

Update gifs, description, and docs.

[1.0.4] - 2021-06-07

Update docs.

[1.0.5] - 2023-01-11

Extension deprecated and no longer being maintained.

React-Icons Snippets

Justin Mahar

⛔ DEPRECATION NOTICE

⛔ This extension has been deprecated and is no longer being maintained.

React-Icons Snippets

📚 Supported languages (file extensions)

📖 Snippets

Library Prefixes

Icon Component Snippets

Import Snippets

You Might Also Like...

Release Notes

[1.0.0] - 2021-06-07

[1.0.1] - 2021-06-07

[1.0.2] - 2021-06-07

[1.0.3] - 2021-06-07

[1.0.4] - 2021-06-07

[1.0.5] - 2023-01-11