{"id":28384754,"url":"https://github.com/stackexchange/stacks-icons","last_synced_at":"2025-06-26T00:31:39.766Z","repository":{"id":33947830,"uuid":"147369939","full_name":"StackExchange/Stacks-Icons","owner":"StackExchange","description":"Authoring tools for Stack Overflow's shared icon set. ","archived":false,"fork":false,"pushed_at":"2025-06-23T03:09:01.000Z","size":25560,"stargazers_count":37,"open_issues_count":5,"forks_count":22,"subscribers_count":11,"default_branch":"production","last_synced_at":"2025-06-23T04:21:51.477Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stackoverflow.design/product/resources/icons","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StackExchange.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2018-09-04T15:44:43.000Z","updated_at":"2025-06-23T03:09:04.000Z","dependencies_parsed_at":"2023-11-13T09:26:29.714Z","dependency_job_id":"b7bd4265-71d4-452f-bf62-bcee0bac37d0","html_url":"https://github.com/StackExchange/Stacks-Icons","commit_stats":{"total_commits":629,"total_committers":20,"mean_commits":31.45,"dds":0.3418124006359301,"last_synced_commit":"773a941c3130af2519e1d505b5eb4f044fce37a6"},"previous_names":[],"tags_count":95,"template":false,"template_full_name":null,"purl":"pkg:github/StackExchange/Stacks-Icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StackExchange","download_url":"https://codeload.github.com/StackExchange/Stacks-Icons/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Icons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261977018,"owners_count":23239250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-05-30T09:30:41.788Z","updated_at":"2025-06-26T00:31:39.756Z","avatar_url":"https://github.com/StackExchange.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Icons\n\n## Including Stacks Icons in your project\n\nStacks Icons are [delivered via NPM](https://www.npmjs.com/package/@stackoverflow/stacks-icons). It can be installed with `npm i @stackoverflow/stacks-icons`\n\n### Manifest\n\nSee \u003chttps://icons.stackoverflow.design/\u003e for an up-to-date list of all icons and spots.\n\n### Use in JavaScript or TypeScript\n\nUsing the library by `import`ing a subpath (e.g. `/icons`) will allow for tree-shaking unused icons from your bundle.\n\n```js\n// es6 / module syntax\nimport { IconFaceMindBlown } from \"@stackoverflow/stacks-icons/icons\";\nimport { SpotWave } from \"@stackoverflow/stacks-icons/spots\";\n\n// both icons and spots are unescaped html strings\nconsole.log(IconFaceMindBlown); // \"\u003csvg\u003e...\u003c/svg\u003e\"\n\n// require() syntax\nconst { Icons, Spots } = require(\"@stackoverflow/stacks-icons\");\n\n// `Icons` and `Spots` are objects mapped by \u003cicon name, html string\u003e\nconsole.log(Icons); // { \"IconAccessibility\": \"\u003csvg\u003e...\u003c/svg\u003e\", ... }\n```\n\n### Using the CSS icons\n\nIn certain cases where adding the raw svg markup to your html would cause bloat or if you need your markup to be more portable, consider using CSS icons. Note: Not all icons are available as CSS icons.\n\n```html\n\u003c!-- include the required css file --\u003e\n\u003clink\n    rel=\"stylesheet\"\n    href=\"/path/to/@stackoverflow/stacks-icons/dist/icons.css\"\n/\u003e\n\n\u003c!-- add the \"svg-icon-bg\" class in addition the desired \"iconNAME\" class --\u003e\n\u003cspan class=\"svg-icon-bg iconBold\"\u003e\u003c/span\u003e\n\n\u003c!-- the icon's color matches the \"currentColor\", so changing the \"color\" property will change the icon color --\u003e\n\u003cspan class=\"svg-icon-bg iconFire\" style=\"color: red;\"\u003e\u003c/span\u003e\n\n\u003c!-- add the \"native\" class to get native styles; these do not respect \"currentColor\" changes --\u003e\n\u003cspan class=\"svg-icon-bg iconFaceMindBlown native\"\u003e\u003c/span\u003e\n```\n\nFor performance / file size reasons, not all icons are available in css. You can add support for more CSS icons my editing the `cssIcons` value in [scripts/definitions.ts](scripts/definitions.ts).\n\n### Use in dotnet\n\nStacks-Icons also provides a NuGet package that targets `netstandard2.0`.\n\nSee the [dotnet/src/README.md](dotnet/src/README.md) file for more details.\n\n### Using the front-end helper for prototyping\n\n\u003e **Note**\n\u003e This method is not intended to be used in production\n\nIf you include the `browser.umd.js` within your prototype’s `body` element (`\u003cscript src=\"https://unpkg.com/@stackoverflow/stacks-icons/dist/browser.umd.js\"\u003e\u003c/script\u003e`) you can render Stacks Icons in the browser using only the following format:\n\n```html\n\u003csvg data-icon=\"IconFaceMindBlown\" class=\"native\"\u003e\u003c/svg\u003e\n\u003csvg data-spot=\"SpotSearch\"\u003e\u003c/svg\u003e\n```\n\nThis package looks out for elements that look like `svg[data-icon]`. If the icon doesn’t exist in Stacks, it will throw you an error in console. Anything in the `class=\"\"` attribute will be passed to the included SVG e.g., `native`\n\n## Developing locally\n\nFirst, you'll need a [Figma personal access token](https://www.figma.com/developers/api#access-tokens). Once you have that, place it in a `.env` file in the root of the repo:\n\n```env\nFIGMA_ACCESS_TOKEN=\"your_access_token_here\"\n```\n\nInstall the necessary dependencies:\n\n```sh\nnpm i\n```\n\nRun the build:\n\n```sh\nnpm run build\n```\n\n### Developing the dotnet library\n\nYou'll need to first run the general package build as outlined above, as the dotnet solution pulls the generated csharp files from the build directory.\n\nYou can then build the library locally via:\n\n```sh\nnpm run build:nuget\n```\n\nor run the unit tests with:\n\n```sh\nnpm run test:nuget\n```\n\n### Adding or updating icons/spots\n\nAll icons and spots are pulled directly from Figma via their API. The _only_ way to add or update icons is by directly modifying the [source Figma file](https://www.figma.com/file/NxAqQAi9i5XsrZSm1WYj6tsM) and then publishing a new component release from within Figma.\n\nIn order to ensure that any new icons/spots in Figma are pulled into this repo, the definitions will need to be added to `scripts/definitions.ts`:\n\n```ts\nconst figmaIconDefinitions = {\n    // ...\n    \"Icon/IconName\": \"\",\n    // ...\n};\n```\n\nWhen adding new entries, please ensure that _all entries are in alphabetical order_ for ease of reference. The initial value is ok to leave empty. Once you run the first build process, it'll throw an error like the following:\n\n\u003e Hash mismatch on 1 files. Expected hash values:\n\u003e \"Icon/Accessibility\": \"ksqXzQjdToAghXkIQ75PE/8qRdUho8Wtux1FTo+mgug=\",\n\nTake this hash value and use it as the value for the previously added entry. Re-run the build process and verify that your new icon is added correctly and has the correct contents.\n\nWhen updating an existing icon, just update the hash as explained in the previous section.\n\n## Publishing a new release\n\nIn order to publish a new release to npm and NuGet, you just need to tag a new release and push it to origin:\n\n```sh\nnpm version [major|minor|patch]\n# for prerelase candidates instead use:\n# npm version prerelease --preid rc\ngit push --follow-tags\n```\n\nFrom there, our GitHub [packages action](.github/workflows/packages.yml) will build the packages and push them to their respective repositories.\n\nAfterwards, make sure you mark a new [GitHub Release](https://github.com/StackExchange/Stacks-Icons/releases/new) based on what has changed.\n\nThis project follows [SemVer](https://semver.org/). Versions including breaking changes to the visual api (e.g. icon drastically changes design or is removed) or code api should be marked `major`. Versions including new features (such as a new or updated icon) should be marked `minor`. Everything else is a `patch` release.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackexchange%2Fstacks-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackexchange%2Fstacks-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackexchange%2Fstacks-icons/lists"}