\n\n## Features of this Library\n\n- **8,111 Symbols** - Contains the entire SF Symbols 8 (beta) icon library, plus an additional 609 supplementary brand icons\n- **Tree-Shakeable** - Each icon can be imported as a standalone component (<1 KB each) or as a bundled import\n- **Type-Safe** - Full TypeScript support with IDE autocomplete\n- **Lightweight** - Only imported icons end up in your bundle\n- **React 18/19** - Works with the latest version of React\n\n## Version\nThis package has been built using the latest icons from **Version 8.0 (135)** – SF Font Version `22.0d4e4`.\n\n## Available Icons\nThis package contains 8,111 icons, which includes 609 supplementary brand icons. All 7,502 of the `Regular` weight icons from the [San Francisco font](https://github.com/bradleyhodges/SFWindows) are included. Other weights are not included in this package, but the icon weights can be made heavier by applying a stroke to the vector paths.\n\nFor simplicity, **I've created a basic icon browser for this package, which you can access here: [bradleyhodges-sfsymbols.vercel.app](https://bradleyhodges-sfsymbols.vercel.app)**\n[](https://bradleyhodges-sfsymbols.vercel.app)\n\n## 🚀 Getting Started\n\nThis package features the actual icons and icon data for SF Symbols 8. To use these icons in React applications, you can make use of the [`sfsymbols-react` companion package](https://www.npmjs.com/package/@bradleyhodges/sfsymbols-react), which exposes a convenient, easy-to-use React component for SF Symbols 8 icons.\n\n### Install the Packages\n\nYou will need to install the following packages to use the icons in your project:\n\n- [`@bradleyhodges/sfsymbols`](https://www.npmjs.com/package/@bradleyhodges/sfsymbols) – Contains the actual icons.\n- [`@bradleyhodges/sfsymbols-react`](https://www.npmjs.com/package/@bradleyhodges/sfsymbols-react) – Contains the React components for the using the icons.\n- [`@bradleyhodges/sfsymbols-types`](https://www.npmjs.com/package/@bradleyhodges/sfsymbols-types) – (Optional) Contains the TypeScript types for the icons, if required.\n\n\n### Usage\n\n> [!CAUTION]\n> SF Symbols is licensed by Apple for use only on Apple platforms. **Use of this package, or any of the other @bradleyhodges/sfsymbols-\\* packages, outside of Apple platforms is NOT permitted.** More info: [Xcode and Apple SDKs Agreement](https://www.apple.com/legal/sla/docs/xcode.pdf#page=6&search=System-Provided%20Images)\n\n```bash\npnpm add @bradleyhodges/sfsymbols@latest @bradleyhodges/sfsymbols-react@latest @bradleyhodges/sfsymbols-types@latest\n```\n\nYou can then import the icons in your project like so:\n\n```tsx\nimport { SFIcon } from '@bradleyhodges/sfsymbols-react';\nimport { sfArrowUpCircleFill } from '@bradleyhodges/sfsymbols';\n\n...\n\n![\"SF](\"https://github.com/bradleyhodges/sfsymbols/blob/main/assets/vx-poster-sf-symbols-new-symbols_2x.png?raw=true\")
\n\n![\"NPM](\"https://img.shields.io/npm-stat/dm/bradleyhodges\")
![\"npmjs](\"https://img.shields.io/badge/npmjs-package-red?logo=npm\"){kind=icon}
![\"GitHub](\"https://img.shields.io/badge/github-repo-blue?logo=github\"){kind=icon}
![\"Version:](\"https://img.shields.io/badge/version-8.1.3-blue.svg\"){kind=icon}
\n \n\t\t\t\t\n ![\"Platforms:](\"https://img.shields.io/badge/Platforms-Next.js%20|%20React.js%20|%20React%20Native-FF69B4.svg\"){kind=icon}
\n\t\t\t\t\n \n\t\t\t\t![\"License:](\"https://img.shields.io/badge/license-MIT-lightgrey.svg\"){kind=icon}
\n \n