{"id":31900749,"url":"https://github.com/x64bits/solid-icons","last_synced_at":"2025-10-13T12:27:08.696Z","repository":{"id":41552688,"uuid":"387686045","full_name":"x64Bits/solid-icons","owner":"x64Bits","description":"The simplest way to use icons in SolidJS","archived":false,"fork":false,"pushed_at":"2023-10-30T04:24:03.000Z","size":276,"stargazers_count":334,"open_issues_count":22,"forks_count":20,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-18T02:39:04.510Z","etag":null,"topics":["brands","design","icon-pack","icons","iconset","logo","solidjs","svg","svg-files","svg-icons"],"latest_commit_sha":null,"homepage":"https://solid-icons.vercel.app","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/x64Bits.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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}},"created_at":"2021-07-20T05:47:59.000Z","updated_at":"2025-09-15T05:12:21.000Z","dependencies_parsed_at":"2023-10-14T20:51:55.919Z","dependency_job_id":"ced42582-936c-4efe-a508-7bb8e1449e18","html_url":"https://github.com/x64Bits/solid-icons","commit_stats":{"total_commits":50,"total_committers":4,"mean_commits":12.5,"dds":0.07999999999999996,"last_synced_commit":"610cb1dc089fda4e5118d84ed589bf3584e81594"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/x64Bits/solid-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x64Bits%2Fsolid-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x64Bits%2Fsolid-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x64Bits%2Fsolid-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x64Bits%2Fsolid-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/x64Bits","download_url":"https://codeload.github.com/x64Bits/solid-icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x64Bits%2Fsolid-icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015060,"owners_count":26085643,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"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":["brands","design","icon-pack","icons","iconset","logo","solidjs","svg","svg-files","svg-icons"],"created_at":"2025-10-13T12:27:07.338Z","updated_at":"2025-10-13T12:27:08.690Z","avatar_url":"https://github.com/x64Bits.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://assets.solidjs.com/banner?project=icons\" height=\"150\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\nSolid Icons\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nModern solution for use icons on SolidJS\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/solid-icons?activeTab=versions\"\u003e\u003cimg src=\"https://badgen.net/npm/v/solid-icons\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/x64Bits/solid-icons/blob/main/LICENSE\"\u003e\u003cimg src=\"https://badgen.net/npm/license/solid-icons\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/solid-icons\"\u003e\u003cimg src=\"https://badgen.net/npm/dt/solid-icons\"\u003e\u003c/a\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://solid-icons.vercel.app/\"\u003eIcons Explorer\u003c/a\u003e | \u003ca href=\"https://github.com/x64Bits/solid-icons-web\"\u003eExample\u003c/a\u003e \n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e\n\n\u003c/h4\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## ✨ Features\n\n- [16 Icon packs](#-included-icons-pack) totally ready to use.\n- Compatible with [Solid Start](https://github.com/solidjs/solid-start) static generation and SSR.\n- Tree shakeable: What you take is what you get.\n- [Customizable](#%EF%B8%8F-configuration) - receive props to extend their usefulness.\n- [Reactivity](https://www.youtube.com/watch?v=J70HXl1KhWE), take advantage of SolidJS to react to changes in props.\n- [Just import and declare](#usage) in your JSX to work out-the-box\n- First class TypeScript support\n\n## 📦 Installation\n\n### Yarn\n\n```bash\nyarn add solid-icons\n```\n\n### NPM\n\n```bash\nnpm install solid-icons --save\n```\n\n## Usage\n\n```jsx\nimport { TbBrandSolidjs } from \"solid-icons/tb\";\n\n\u003cTbBrandSolidjs size={24} color=\"#2c4f7c\" /\u003e;\n```\n\n## Custom icon\n\nThere are situations where you want to use your own set of icons, CustomIcon is a component exposed from the library that uses the IconTemplate that all the icons in the library already use. (Thanks [kdaquila](https://github.com/kdaquila) for the example).\n\n```jsx\nimport { CustomIcon } from \"solid-icons/lib\";\n\nconst iconContent = {\n  a: { fill: \"currentColor\", viewBox: \"0 0 384 512\" },\n  c: '\u003cpath d=\"M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z\"/\u003e',\n}\n\n\u003cCustomIcon src={iconContent} size={24} color=\"#2c4f7c\" /\u003e;\n```\n\n### Props\n\n| Key     | Default     | Notes                                                                                            |\n| ------- | ----------- | ------------------------------------------------------------------------------------------------ |\n| `src`   | required    | format: `a` Attributes needed for the svg like `viewBox`, `c`: svg content, look at the example. |\n| `size`  | `1em`       |                                                                                                  |\n| `class` | `undefined` |                                                                                                  |\n| `title` | `undefined` | A icon title a11y                                                                                |\n\n## 🔋 Included icons pack\n\n| Icon Library                                                       | License                                                                 | Version | Abbreviation |\n| ------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------- | ------------ |\n| [Ant Design Icons](https://github.com/ant-design/ant-design-icons) | [MIT](https://opensource.org/licenses/MIT)                              | 4.2.1   | ai           |\n| [Bootstrap Icons](https://github.com/twbs/icons)                   | [MIT](https://opensource.org/licenses/MIT)                              | 1.10.5  | bs           |\n| [BoxIcons](https://github.com/atisawd/boxicons)                    | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 2.1.4   | bi           |\n| [Feather](https://feathericons.com/)                               | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)      | 4.29.0  | fi           |\n| [Font Awesome](https://fontawesome.com/)                           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 6.4.0   | fa           |\n| [Heroicons](https://github.com/refactoringui/heroicons)            | [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)    | 2.0.18  | hi           |\n| [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free)           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 1.0.0   | im           |\n| [Ionicons](https://ionicons.com/)                                  | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)       | 7.1.2   | io           |\n| [Remix Icon](https://github.com/Remix-Design/RemixIcon)            | [Apache License Version 2.0](http://www.apache.org/licenses/)           | 3.3.0   | ri           |\n| [Simple Icons](https://simpleicons.org/)                           | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/) | 9.0.0   | si           |\n| [Typicons](http://s-ings.com/typicons/)                            | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)         | 2.1.2   | ti           |\n| [VS Code Icons](https://github.com/microsoft/vscode-codicons)      | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)               | 0.0.32  | vs           |\n| [Weather Icons](https://erikflowers.github.io/weather-icons/)      | [SIL OFL 1.1](http://scripts.sil.org/OFL)                               | 2.0.12  | wi           |\n| [css.gg](https://github.com/astrit/css.gg)                         | [MIT](https://opensource.org/licenses/MIT)                              | 2.0.0   | cg           |\n| [Tabler Icons](https://github.com/tabler/tabler-icons)             | [MIT](https://opensource.org/licenses/MIT)                              | 2.20.0  | tb           |\n| [Github Octicons](https://github.com/primer/octicons)              | [MIT](https://opensource.org/licenses/MIT)                              | 19.1.0  | oc           |\n\n## ⚙️ Configuration\n\nsolid-icons components receive props like any SVG, you also have a few custom ones.\n\n```jsx\nimport { TbBrandSolidjs } from \"solid-icons/tb\";\n\n\u003cTbBrandSolidjs size={24} color=\"#2c4f7c\" class=\"custom-icon\" title=\"a11y\" /\u003e;\n```\n\n| Key     | Default                  | Notes             |\n| ------- | ------------------------ | ----------------- |\n| `color` | `currentColor` (inherit) |                   |\n| `size`  | `1em`                    |                   |\n| `class` | `undefined`              |                   |\n| `title` | `undefined`              | A icon title a11y |\n\n## 💻 Development\n\nrequirements:\n\nnode **^16.14.0**\n\n### Basic build\n\nYou can locally clone this repository:\n\n```bash\n$ git clone https://github.com/x64Bits/solid-icons\n$ cd solid-icons\n$ yarn\n$ yarn build\n```\n\n### Build dev mode\n\nIf you did the above steps and want to build while listening if the files change you can run:\n\n```bash\n$ yarn dev\n```\n\n### Supported arguments\n\nIsolate a single library, this allows you to avoid recompiling the entire library and thus optimize the result of a single one:\n\n```bash\n$ yarn dev --isolate=\"ai\"\n```\n\nThis command is used to build the files destined for web, if you want to change the path, in `src/build/constants.ts` you can modify the output of the files:\n\n```bash\n$ yarn dev --web\n```\n\n## 📝 Licence\n\nMIT\n\n- Icons are taken from the other projects so please check each project licences accordingly.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx64bits%2Fsolid-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fx64bits%2Fsolid-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx64bits%2Fsolid-icons/lists"}