import { GuidesDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Icons);

Icon libraries with Mantine

You can use any icon library with Mantine components. The most popular options are:

Phosphor icons

Phosphor icons are used in Mantine demos, documentation, and some @mantine/ packages depend on them. If you don't know which icon library to use, we recommend Phosphor icons.

Icon size

Most icon libraries support a size prop (or similar width and height props) that allows you to change the icon width and height. Usually, it's a number in pixels.

rem units in size prop

The icon size prop is usually converted to width and height props under the hood. If you set size={16} it will be converted to width="16" and height="16" attributes on the svg element.

You can use rem units in the size prop: size="1rem" will be converted to width="1rem" and height="1rem", but it's not recommended as it's prohibited by the SVG standard – some browsers (Firefox) will show a warning in the console.

Custom icons

We recommend using icons as React components. In this case, you'll be able to use currentColor in the fill and stroke props. This will change the icon color based on the context it's used in.