{"id":20788192,"url":"https://github.com/icons-pack/react-simple-icons","last_synced_at":"2026-02-10T00:11:34.056Z","repository":{"id":37789218,"uuid":"200424238","full_name":"icons-pack/react-simple-icons","owner":"icons-pack","description":"📦 This package provides the Simple Icons packaged as a set of React components.","archived":false,"fork":false,"pushed_at":"2025-04-13T04:31:38.000Z","size":14285,"stargazers_count":372,"open_issues_count":4,"forks_count":19,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T05:26:39.762Z","etag":null,"topics":["brands","codea","components","desing","icons","icons-pack","iconset","logo","react","react-simple-icons","simple-icons","svg","svg-files","ui","ui-components"],"latest_commit_sha":null,"homepage":"","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/icons-pack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"wootsbot","patreon":"wootsbot","open_collective":null,"ko_fi":"wootsbot","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-08-03T21:54:26.000Z","updated_at":"2025-04-13T04:30:20.000Z","dependencies_parsed_at":"2024-01-16T23:33:56.945Z","dependency_job_id":"e459868f-3a7a-480a-9158-b5fcacc1724b","html_url":"https://github.com/icons-pack/react-simple-icons","commit_stats":{"total_commits":291,"total_committers":15,"mean_commits":19.4,"dds":"0.23367697594501713","last_synced_commit":"8bfec3d3b7b9438a1400eeacd5d052e61c0a1b2b"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icons-pack%2Freact-simple-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icons-pack%2Freact-simple-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icons-pack%2Freact-simple-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icons-pack%2Freact-simple-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icons-pack","download_url":"https://codeload.github.com/icons-pack/react-simple-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248669587,"owners_count":21142891,"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":["brands","codea","components","desing","icons","icons-pack","iconset","logo","react","react-simple-icons","simple-icons","svg","svg-files","ui","ui-components"],"created_at":"2024-11-17T15:00:57.621Z","updated_at":"2026-02-10T00:11:34.050Z","avatar_url":"https://github.com/icons-pack.png","language":"TypeScript","funding_links":["https://github.com/sponsors/wootsbot","https://patreon.com/wootsbot","https://ko-fi.com/wootsbot"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"react simple icons\" src=\"https://github.com/icons-pack/react-simple-icons/blob/main/docs/images/svg/react-simple-icons.svg\" width=\"150\" /\u003e\n\n# react-simple-icons\n\nThis package provides the [Simple Icons 16.8.0](https://github.com/simple-icons/simple-icons/releases/tag/16.8.0)\npackaged as a set of [React](https://facebook.github.io/react/) components.\n\n  [![www.npmjs.com!](https://img.shields.io/npm/v/@icons-pack/react-simple-icons?color=CB061D\u0026style=flat-square)](https://www.npmjs.com/package/@icons-pack/react-simple-icons)\n  [![downloads](https://img.shields.io/npm/dw/@icons-pack/react-simple-icons?color=087BB4\u0026style=flat-square)](https://www.npmjs.com/package/@icons-pack/react-simple-icons)\n  [![license](https://img.shields.io/npm/l/@icons-pack/react-simple-icons?color=008660\u0026style=flat-square)](https://github.com/icons-pack/react-simple-icons/blob/main/LICENSE)\n\u003c/div\u003e\n\n## Installation\n\nInstall the package in your project directory with:\n\n```shell\nnpm add @icons-pack/react-simple-icons\n```\n\n## Usage\n\nYou can use [simpleicons.org](https://simpleicons.org) to find a specific icon. When importing an icon, keep in mind\nthat the names of the icons are [upperCamelCase](https://github.com/samverschueren/uppercamelcase) , for instance:\n\n- [`Material Design`](https://simpleicons.org/?q=material) is exposed as\n  `{ SiMaterialdesign } from @icons-pack/react-simple-icons`\n- [`azure devOps`](https://simpleicons.org/?q=azure%20devOps) is exposed as\n  `{ SiAzuredevops } from @icons-pack/react-simple-icons`\n\n## Basic example\n\n```jsx\nimport { SiReact } from '@icons-pack/react-simple-icons';\n\nfunction BasicExample() {\n  return \u003cSiReact color='#61DAFB' size={24} /\u003e;\n}\n```\n\n## Change title\n\n`@icons-pack/react-simple-icons` provides a default title referring to the component name\n\n\u003e The `\u003ctitle\u003e` element provides an accessible, short-text description of any SVG container element or graphics element.\n\n```jsx\nimport { SiReact } from '@icons-pack/react-simple-icons';\n\n// title default \"React\"\nfunction ChangeTitle() {\n  return \u003cSiReact title='My title' color='#61DAFB' size={24} /\u003e;\n}\n```\n\n## Use default color\n\nSet color as `default` to use the default color for each icon\n\n```jsx\nimport { SiReact } from '@icons-pack/react-simple-icons';\n\nfunction DefaultColorExample() {\n  return \u003cSiReact color='default' size={24} /\u003e;\n}\n```\n\n### Use default color as hex\n\nAppend `Hex` to the icon name to use the default color as hex string\n\n```jsx\nimport { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';\n\nfunction DefaultColorExample() {\n  return \u003cSiReact color={SiReactHex} size={24} /\u003e;\n}\n```\n\n## Custom styles\n\n```jsx\nimport { SiReact } from '@icons-pack/react-simple-icons';\n\nfunction CustomStyles() {\n  return \u003cSiReact className='myStyle' /\u003e;\n}\n```\n\n```css\n.myStyle {\n  width: 35px;\n  height: 35px;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficons-pack%2Freact-simple-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficons-pack%2Freact-simple-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficons-pack%2Freact-simple-icons/lists"}