[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-use-fluent-icons-in-react":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"use-fluent-icons-in-react","How to use Fluent UI System Icons in React","Install @fluentui\u002Freact-icons, pick the right component name, size and color icons, toggle filled and regular states, and keep your bundle small.","2026-09-23",1,"\u003Cp>Microsoft publishes every Fluent UI System Icon as a React component in the \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@fluentui\u002Freact-icons\">\u003Ccode>@fluentui\u002Freact-icons\u003C\u002Fcode>\u003C\u002Fa> package. It's the easiest way to use these icons in a React, Next.js or Remix app, and you don't need the rest of Fluent UI to use it.\u003C\u002Fp>\n\u003Ch2>Install the package\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install @fluentui\u002Freact-icons\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The package ships thousands of components, but it's written so bundlers only include the icons you import. You don't need to configure anything for that to work in Vite, Next.js or webpack 5.\u003C\u002Fp>\n\u003Ch2>Find the component name\u003C\u002Fh2>\n\u003Cp>Component names follow a predictable pattern: the icon name in PascalCase, then the size, then the style.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Icon\u003C\u002Fth>\n\u003Cth>Size\u003C\u002Fth>\n\u003Cth>Style\u003C\u002Fth>\n\u003Cth>Component\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Add Circle\u003C\u002Ftd>\n\u003Ctd>24\u003C\u002Ftd>\n\u003Ctd>Filled\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>AddCircle24Filled\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Calendar\u003C\u002Ftd>\n\u003Ctd>20\u003C\u002Ftd>\n\u003Ctd>Regular\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>Calendar20Regular\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Delete\u003C\u002Ftd>\n\u003Ctd>24\u003C\u002Ftd>\n\u003Ctd>Regular\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>Delete24Regular\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Every icon page on Fluenticons shows the exact import for its 24 px versions, so the quickest route is to search for the icon here and copy the import line.\u003C\u002Fp>\n\u003Cp>There are also \u003Cstrong>unsized\u003C\u002Fstrong> components such as \u003Ccode>DeleteRegular\u003C\u002Fcode> and \u003Ccode>DeleteFilled\u003C\u002Fcode>. They render at \u003Ccode>1em\u003C\u002Fcode>, so they scale with the surrounding font size. That's handy inside buttons and text. Use the sized components when you want exact pixel dimensions.\u003C\u002Fp>\n\u003Ch2>Render an icon\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import { Delete24Regular } from "@fluentui\u002Freact-icons";\n\nexport function DeleteButton({ onClick }) {\n  return (\n    <button type="button" onClick={onClick}>\n      <Delete24Regular \u002F>\n      Delete\n    <\u002Fbutton>\n  );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The icon inherits the text color of its parent, because its fill defaults to \u003Ccode>currentColor\u003C\u002Fcode>. Style the button's \u003Ccode>color\u003C\u002Fcode> and the icon follows.\u003C\u002Fp>\n\u003Ch2>Change the color\u003C\u002Fh2>\n\u003Cp>You have three options, from most to least flexible:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Use CSS \u003Ccode>color\u003C\u002Fcode>.\u003C\u002Fstrong> Set \u003Ccode>color\u003C\u002Fcode> on the icon or any parent element. This is usually what you want, because hover and focus styles work automatically.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Pass \u003Ccode>primaryFill\u003C\u002Fcode>.\u003C\u002Fstrong> \u003Ccode><Delete24Regular primaryFill="#d13438" \u002F>\u003C\u002Fcode> sets the fill directly. It's handy for one-off cases, but it ignores CSS.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Pass a \u003Ccode>className\u003C\u002Fcode>.\u003C\u002Fstrong> The component forwards \u003Ccode>className\u003C\u002Fcode> and other SVG attributes, so utility classes like Tailwind's \u003Ccode>text-red-600\u003C\u002Fcode> work too.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>Change the size\u003C\u002Fh2>\n\u003Cp>Sized components have a fixed \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode>. To make one bigger, either import a larger size where Microsoft publishes one (\u003Ccode>Delete28Regular\u003C\u002Fcode>, \u003Ccode>Delete32Regular\u003C\u002Fcode>, and so on) or set the size with CSS. The artwork is tuned for each published size, so a native 20 px icon will look slightly crisper than a 24 px icon scaled down.\u003C\u002Fp>\n\u003Cp>With unsized components, set \u003Ccode>font-size\u003C\u002Fcode> on the icon or its parent:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><DeleteRegular style={{ fontSize: 32 }} \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Toggle between filled and regular\u003C\u002Fh2>\n\u003Cp>A common pattern in Microsoft's apps is to show the regular icon normally and the filled icon when something is active or selected. The package includes a helper for that:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import { bundleIcon, Heart24Filled, Heart24Regular } from "@fluentui\u002Freact-icons";\n\nconst HeartIcon = bundleIcon(Heart24Filled, Heart24Regular);\n\nexport function FavoriteButton({ isFavorite, onToggle }) {\n  return (\n    <button type="button" aria-pressed={isFavorite} onClick={onToggle}>\n      <HeartIcon filled={isFavorite} \u002F>\n      Favorite\n    <\u002Fbutton>\n  );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>bundleIcon\u003C\u002Fcode> renders both versions and shows one based on the \u003Ccode>filled\u003C\u002Fcode> prop, so switching doesn't cause any layout shift.\u003C\u002Fp>\n\u003Ch2>Make icons accessible\u003C\u002Fh2>\n\u003Cp>By default the components add \u003Ccode>aria-hidden="true"\u003C\u002Fcode>. That's correct when the icon sits next to visible text, as in the examples above, because screen readers read the text instead.\u003C\u002Fp>\n\u003Cp>For icon-only buttons, give the \u003Cstrong>button\u003C\u002Fstrong> an accessible name:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><button type="button" aria-label="Delete file">\n  <Delete24Regular \u002F>\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>If an icon stands alone and carries meaning (a status indicator, for example), pass \u003Ccode>title\u003C\u002Fcode>. The component turns it into an \u003Ccode>aria-label\u003C\u002Fcode> and sets \u003Ccode>role="img"\u003C\u002Fcode>. The \u003Ca href=\"\u002Fguides\u002Faccessible-icon-buttons\u002F\">accessible icon buttons guide\u003C\u002Fa> covers this in more depth.\u003C\u002Fp>\n\u003Ch2>When not to use the package\u003C\u002Fh2>\n\u003Cp>If you only need a handful of icons in a small project, or you're not using React, copying the SVG works just as well. Every icon on this site can be copied as a ready-made React component from the editor. The generated component is plain JSX, has no dependency, and forwards props to the \u003Ccode><svg>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Quick checklist\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Import only the icons you use by name. Don't import the whole package into an object.\u003C\u002Fli>\n\u003Cli>Prefer CSS \u003Ccode>color\u003C\u002Fcode> over \u003Ccode>primaryFill\u003C\u002Fcode> so theming and hover states just work.\u003C\u002Fli>\n\u003Cli>Label icon-only buttons with \u003Ccode>aria-label\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Use \u003Ccode>bundleIcon\u003C\u002Fcode> for filled\u002Fregular state toggles.\u003C\u002Fli>\n\u003C\u002Ful>\n",1790223026575]