{"id":46178416,"url":"https://github.com/nine-thirty-five/material-symbols-react","last_synced_at":"2026-06-15T02:02:33.247Z","repository":{"id":215639191,"uuid":"738068310","full_name":"nine-thirty-five/material-symbols-react","owner":"nine-thirty-five","description":"Use Google's Material Symbols (icons) in React with ease.","archived":false,"fork":false,"pushed_at":"2026-06-08T00:36:05.000Z","size":657,"stargazers_count":13,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-06-08T02:21:54.319Z","etag":null,"topics":["icon-pack","icons","material-design","material-icons","react","react-icons"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@nine-thirty-five/material-symbols-react","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nine-thirty-five.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-02T10:46:23.000Z","updated_at":"2026-06-08T00:36:09.000Z","dependencies_parsed_at":"2024-05-20T01:36:49.378Z","dependency_job_id":"0331cc74-b18e-4dcb-8b0f-ab11ec05316d","html_url":"https://github.com/nine-thirty-five/material-symbols-react","commit_stats":null,"previous_names":["nine-thirty-five/material-icons-react","nine-thirty-five/material-symbols-react"],"tags_count":67,"template":false,"template_full_name":null,"purl":"pkg:github/nine-thirty-five/material-symbols-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nine-thirty-five%2Fmaterial-symbols-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nine-thirty-five%2Fmaterial-symbols-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nine-thirty-five%2Fmaterial-symbols-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nine-thirty-five%2Fmaterial-symbols-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nine-thirty-five","download_url":"https://codeload.github.com/nine-thirty-five/material-symbols-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nine-thirty-five%2Fmaterial-symbols-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34344440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icon-pack","icons","material-design","material-icons","react","react-icons"],"created_at":"2026-03-02T19:36:20.514Z","updated_at":"2026-06-15T02:02:33.242Z","avatar_url":"https://github.com/nine-thirty-five.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eMaterial Symbols React\u003c/h1\u003e\n\nUse [Google's Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) in React — **every style, weight and fill**, fully tree-shakeable, zero runtime dependencies.\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][download-image]][npm-downloads]\n![npm-typescript]\n[![GitHub License](https://img.shields.io/badge/license-Apache--2.0-green)](./LICENSE)\n\n\u003c/div\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Importing](#importing)\n  - [Weights](#weights)\n  - [Props](#props)\n- [Tree-shaking \u0026 bundle size](#tree-shaking--bundle-size)\n- [Finding icons (for agents \u0026 tooling)](#finding-icons-for-agents--tooling)\n- [ESM only](#esm-only)\n- [Migrating from v1](#migrating-from-v1)\n- [How it works](#how-it-works)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @nine-thirty-five/material-symbols-react\n# or: yarn add … / pnpm add …\n```\n\n**Requires React 18 or 19** (peer dependency).\n\n## Usage\n\nMaterial Symbols come in three **styles** (`outlined`, `rounded`, `sharp`), seven **weights**\n(`100`–`700`), and two **fills** (outlined / filled). Each combination is its own import path, so\nyour bundler only ships the exact icons you use.\n\n### Importing\n\n```tsx\n// Default weight (400)\nimport { Search } from '@nine-thirty-five/material-symbols-react/outlined';\nimport { Home } from '@nine-thirty-five/material-symbols-react/outlined/filled';\n\n// Specific weight\nimport { Star } from '@nine-thirty-five/material-symbols-react/rounded/300';\nimport { Favorite } from '@nine-thirty-five/material-symbols-react/rounded/700/filled';\n\n// Sharp style\nimport { Delete } from '@nine-thirty-five/material-symbols-react/sharp/500';\n```\n\n```tsx\nfunction Toolbar() {\n  return (\n    \u003c\u003e\n      \u003cSearch /\u003e\n      \u003cStar size={32} /\u003e\n      \u003cFavorite color=\"crimson\" /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Weights\n\nImport paths follow the pattern `…/{style}[/{weight}][/filled]`:\n\n| Path                   | Style    | Weight | Fill |\n| ---------------------- | -------- | ------ | ---- |\n| `…/outlined`           | outlined | 400    | 0    |\n| `…/outlined/filled`    | outlined | 400    | 1    |\n| `…/outlined/300`       | outlined | 300    | 0    |\n| `…/rounded/700/filled` | rounded  | 700    | 1    |\n| `…/sharp/100`          | sharp    | 100    | 0    |\n\nStyles: `outlined`, `rounded`, `sharp`. Weights: `100`, `200`, `300`, `400`, `500`, `600`,\n`700` (the bare path defaults to `400`). Append `/filled` for the filled variant.\n\n### Props\n\nEvery icon accepts all SVG props (`SVGProps\u003cSVGSVGElement\u003e`), plus a convenience `size` prop:\n\n```tsx\n\u003cSearch size={32} /\u003e                 {/* sets width and height */}\n\u003cSearch /\u003e                            {/* defaults to 1em — scales with font-size */}\n\u003cSearch color=\"red\" /\u003e                {/* icons use fill=\"currentColor\" */}\n\u003cSearch className=\"icon\" /\u003e\n\u003cSearch style={{ verticalAlign: 'middle' }} /\u003e\n\u003cSearch onClick={…} aria-label=\"Search\" /\u003e\n```\n\n- **`size`** — `number | string`. Sets both `width` and `height`. Defaults to `\"1em\"`, so icons\n  scale with the surrounding `font-size`. Pass `width`/`height` explicitly to override.\n- **Color** — icons render with `fill=\"currentColor\"`, so they inherit `color` from CSS.\n\n## Tree-shaking \u0026 bundle size\n\nEach icon is a one-line module (`base(\"\u003cpath\u003e\")`) over a single shared component, marked\n`/*#__PURE__*/` in a `\"sideEffects\": false` package. Importing one icon at one weight ships only\nthat path — not the rest of the set, and not other weights. Works with Vite, Next.js, webpack,\nesbuild, Parcel, and Rollup.\n\n## Finding icons (for agents \u0026 tooling)\n\nEvery install ships a searchable catalog at **`…/manifest.json`**\n(`node_modules/@nine-thirty-five/material-symbols-react/dist/manifest.json`). Each\nentry has the icon `name`, its exported `component`, `categories`, and rich `tags`\n(synonyms) — so a tool or coding agent can resolve a natural-language request to a\ncomponent **offline**, no API calls:\n\n```jsonc\n{\n  \"importPattern\": \"import { \u003ccomponent\u003e } from '@nine-thirty-five/material-symbols-react/\u003cstyle\u003e[/\u003cweight\u003e][/filled]'\",\n  \"styles\": [\"outlined\", \"rounded\", \"sharp\"],\n  \"weights\": [100, 200, 300, 400, 500, 600, 700],\n  \"defaultWeight\": 400,\n  \"icons\": [\n    {\n      \"name\": \"add\",\n      \"component\": \"Add\",\n      \"categories\": [\"…\"],\n      \"tags\": [\"add\", \"create\", \"new\", \"plus\", \"+\"],\n    },\n  ],\n}\n```\n\nFor example, to satisfy _\"add a create icon to the button\"_: match `create` against\n`tags`, pick `Add`, and import it:\n\n```tsx\nimport { Add } from '@nine-thirty-five/material-symbols-react/outlined';\n\n\u003cbutton\u003e\n  \u003cAdd /\u003e Create\n\u003c/button\u003e;\n```\n\nThe catalog is also importable directly:\n\n```ts\nimport manifest from '@nine-thirty-five/material-symbols-react/manifest.json' with { type: 'json' };\n```\n\n## ESM only\n\nThis package ships **ES Modules only**. It works in all modern bundlers and ESM Node. If you need\nto consume it from a CommonJS module under `node16`/`nodenext` resolution, use a dynamic\n`import()`.\n\n## Migrating from v1\n\nv2 adds the weight axis and a few ergonomic changes:\n\n- **Existing imports keep working.** `…/outlined` and `…/outlined/filled` still resolve to weight\n  400, exactly as before.\n- **Default size changed from `24` to `1em`.** Icons now scale with `font-size`. To restore the old\n  fixed size, pass `size={24}` (or set `width`/`height`).\n- **New `size` prop** and new weight entrypoints (`/100`–`/700`).\n- **14 icon names corrected** (a v1 bug dropped a bare `0`), e.g. `SpeedFivex → SpeedZeroFivex`.\n- **ESM-only** (v1 was effectively ESM too; the broken CJS `main` field has been removed).\n\n### Automatic upgrade (codemod)\n\nRun the bundled [codemod](./codemods/README.md) to apply the size and rename changes for you:\n\n```sh\nnpx jscodeshift -t node_modules/@nine-thirty-five/material-symbols-react/codemods/v1-to-v2.cjs \\\n  --parser tsx src/\n```\n\nIt adds `size={24}` to icons that relied on the old default and renames the 14 corrected\ncomponents. Pass `--size=skip` to adopt the new `1em` default instead.\n\n## How it works\n\nIcons are generated from Google's official artifacts — the icon list from the\n[Material Symbols metadata API](https://fonts.google.com/metadata/icons) and the SVGs from the\n`fonts.gstatic.com` CDN. The generator extracts each path, optimizes it with SVGO, and emits the\n`dist` tree directly. No web scraping, no headless browser. See [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## License\n\nMaterial design icons are created by [Google](https://github.com/google/material-design-icons#license).\n\n\u003e We have made these icons available for you to incorporate into your products under the Apache\n\u003e License Version 2.0. Feel free to remix and re-share these icons and documentation in your\n\u003e products. We'd love attribution in your app's about screen, but it's not required.\n\n[npm-url]: https://www.npmjs.com/package/@nine-thirty-five/material-symbols-react\n[npm-image]: https://img.shields.io/npm/v/@nine-thirty-five/material-symbols-react\n[download-image]: https://img.shields.io/npm/dm/@nine-thirty-five/material-symbols-react\n[npm-downloads]: https://www.npmjs.com/package/@nine-thirty-five/material-symbols-react\n[npm-typescript]: https://img.shields.io/npm/types/@nine-thirty-five/material-symbols-react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnine-thirty-five%2Fmaterial-symbols-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnine-thirty-five%2Fmaterial-symbols-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnine-thirty-five%2Fmaterial-symbols-react/lists"}