Skip to main content

Using React Icons

We use react-icons to include icons in our components. React Icons provides a comprehensive collection of popular icon libraries that can be easily imported and used as React components.

This is meant to be used both in the internal components, and in the mdx documentation.

Finding and Using Icons​

  1. Visit the React Icons Search Page to browse available icons
  2. Search for icons using keywords in the search bar (e.g. "expand", "close", "menu")
  3. Click on an icon to copy its import statement and component name

Example Usage​

Here's how to use Material Design icons from the react-icons/md collection:

import {MdCottage} from "react-icons/md";

<MdCottage /> Nothing like home
  • Nothing like home :)

Common Icons Examples​

  • MdSearch - Used for search functionality
  • MdMenu - Used for mobile menu toggles
  • FaGithub - GitHub link
  • FaTwitter - Twitter/X link
  • FaSlack - Slack link
  • IoMdCheckmark - Success indicators
  • IoMdClose - Close buttons or error indicators
  • SiPython - Python
  • FaReact - React
  • SiRuby - Ruby
  • FaNode - Node.js
  • FaJava - Java
  • SiJavascript - JavaScript
  • SiTypescript - TypeScript
try to stick to a single provider

The react-icons package will only bundle icons that are used in the page, so size isn't an issue.

But for visual consistency, it might be a good idea to stick to a single provider.

Custom SW icons