Skip to content
Skip to content

Using icon libraries

Learn how to use your favorite icon library with Joy UI.

Material UI Icons

@mui/icons-material includes the 2,100+ official Material Icons converted to SVG Icon components.

Installation

This section assumes that you've already installed Joy UI in your app—see Installation for instructions.

yarn

yarn add @mui/icons-material @mui/material

npm

npm install @mui/icons-material @mui/material

Usage

By default, Joy UI components are able to control an icon's color, font size, and margins when its size or variant changes.

Hello World

Hello World

Hello World

Hello World

Size

To control the size of the icon, use fontSize prop. The value can be one of the keys in theme.fontSize (the default value is "xl").

Press Enter to start editing

Third-party icons

To use other icon libraries, web font icons, or plain SVG icons with Joy UI, apply the styles with specific CSS variables as shown in the example below:

import { CssVarsProvider } from '@mui/joy/styles';
import GlobalStyles from '@mui/joy/GlobalStyles';
// The `GlobalStyles` component is used to create a global style sheet.
// You can replace it with your preferred CSS solution.

function App() {
  return (
    <CssVarsProvider>
      <GlobalStyles styles={{
        // The {selector} is the CSS selector to target the icon.
        // We recommend using a class over a tag if possible.
        '{selector}': {
          color: "var(--Icon-color)",
          margin: "var(--Icon-margin)",
          fontSize: "var(--Icon-fontSize, 20px)",
          width: "1em",
          height: "1em"
        }
      }}>
    </CssVarsProvider>
  )
}

Joy UI components can control those variables based on their size and variant to make the icons fit perfectly.


Here is a collection of well-known icon libraries that you can use with Joy UI.

react-icons

Ionicons

Heroicons

Bootstrap Icons

Font Awesome Icons