# @uifabric/icons

> Fluent UI React icon set.

Latest version **7.9.6** (published 2025-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uifabric/icons
pnpm add @uifabric/icons
yarn add @uifabric/icons
bun add @uifabric/icons
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 7.9.6 |
| Published | 2025-02-26 |
| First published | 2017-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20283 |
| Maintainers | uifabricteam, dzearing, justslone, microsoft1es, cliffkoh |

## Links

- npm: https://www.npmjs.com/package/@uifabric/icons
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@uifabric/icons

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [@uifabric/styling](https://npm.io/package/@uifabric/styling.md) ^7.25.1
- [@uifabric/utilities](https://npm.io/package/@uifabric/utilities.md) ^7.38.2
- [@uifabric/set-version](https://npm.io/package/@uifabric/set-version.md) ^7.0.24

## Recent versions

- 7.9.6 (latest) — 2025-02-26
- 6.5.5 (lts) — 2019-09-04
- 7.0.0-rc002 (next) — 2019-06-10
- 7.0.0-alpha034 (beta) — 2019-06-06
- 7.9.5 — 2022-10-31
- 7.9.4 — 2022-10-04
- 7.9.3 — 2022-10-04
- 7.9.2 — 2022-09-30
- 7.9.1 — 2022-09-29
- 7.9.0 — 2022-09-27
- 7.8.6 — 2022-09-06
- 7.8.4 — 2022-09-02
- 7.8.3 — 2022-09-02
- 7.8.2 — 2022-09-02
- 7.8.1 — 2022-09-01
- … 199 more at https://npm.io/package/@uifabric/icons/versions

## README

# @uifabric/icons

**Icons for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

Fluent UI React Icons includes a collection of 1100+ icons which you can use in your application.

## Getting started

If you are using Fluent UI React components, you can make all icons available by calling the `initializeIcons` function from the `@uifabric/icons` package:

```tsx
import { initializeIcons } from '@uifabric/icons';

// Register icons and pull the fonts from the default SharePoint cdn.
initializeIcons();

// ...or, register icons and pull the fonts from your own cdn:
initializeIcons('https://my.cdn.com/path/to/icons/');
```

This will make ALL icons in the collection available, but will download them on demand when referenced using the `@uifabric/styling` APIs `getIcon` or `getIconClassName`.

## Usage in code

### Icon component

If you are using Fluent UI React, you can use the `Icon` component and pass in the corresponding iconName property to render a given icon.

```tsx
import { Icon } from '@fluentui/react/lib/Icon';

<Icon iconName="Snow" />;
```

### `getIconClassName` API

The styling package includes a `getIconClassName` API which can provide a css class to use for rendering the icon manually using the `:before` pseudoselector:

```ts
import { getIconClassName } from '@uifabric/styling';

return `<i class="${getIconClassName('Snow')}" />`;
```

## Notes

See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.

---
_Source: https://npm.io/package/@uifabric/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._