# @fluentui/react-icons-northstar

> A set svg icons and utilities for creating custom ones.

Latest version **0.71.4** (published 2026-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-icons-northstar
pnpm add @fluentui/react-icons-northstar
yarn add @fluentui/react-icons-northstar
bun add @fluentui/react-icons-northstar
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.71.4 |
| Published | 2026-04-28 |
| First published | 2020-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 4.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20310 |
| Maintainers | chrisdholt, miroslavstastny, levithomason, uifabricteam, uifrnbot, layershifter, justslone, microsoft1es, sopranopillow |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-icons-northstar
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-icons-northstar
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-icons-northstar

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.4
- [@fluentui/styles](https://npm.io/package/@fluentui/styles.md) ^0.71.4
- [@fluentui/accessibility](https://npm.io/package/@fluentui/accessibility.md) ^0.71.4
- [@fluentui/react-bindings](https://npm.io/package/@fluentui/react-bindings.md) ^0.71.4

## Recent versions

- 0.71.4 (latest) — 2026-04-28
- 0.66.1-beta.0 (beta) — 2023-02-06
- 0.47.15 (patch) — 2020-11-25
- 0.71.3 — 2026-02-25
- 0.71.2 — 2026-02-25
- 0.71.1 — 2025-11-20
- 0.71.0 — 2025-11-03
- 0.70.0 — 2025-10-30
- 0.69.1 — 2025-10-29
- 0.69.0 — 2025-10-27
- 0.68.2 — 2025-10-27
- 0.67.2 — 2025-10-21
- 0.68.1 — 2025-10-03
- 0.67.1 — 2025-10-03
- 0.68.0 — 2025-10-02
- … 53 more at https://npm.io/package/@fluentui/react-icons-northstar/versions

## README

# `@fluentui/react-icons-northstar`

A set of reusable components and hooks to build component libraries and UI kits.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Icons](#icons)
  - [`createSvgIcon()`](#createsvgicon)
    - [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

**NPM**

```bash
npm install --save @fluentui/react-icons-northstar
```

**Yarn**

```bash
yarn add @fluentui/react-icons-northstar
```

# Utilities

## `createSvgIcon()`

A factory for creating svg icons.

#### Usage

The example below assumes an icon component called `<CircleIcon>` will be created in this way:

```tsx
const circleSvg = ({ classes }) => (
  <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
    <g>
      <path d="M16,8c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S20.418,8,16,8z M16,22.85c-3.783,0-6.85-3.067-6.85-6.85S12.217,9.15,16,9.15s6.85,3.067,6.85,6.85S19.783,22.85,16,22.85z" />
      <circle className={classes.filledPart} cx="16" cy="16" r="8" />
    </g>
  </svg>
);

const CircleIcon = createSvgIcon({ svg: circleSvg, displayName: 'CircleIcon' });
```

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