{"id":13422005,"url":"https://github.com/iconify/iconify-react","last_synced_at":"2026-03-03T14:39:49.430Z","repository":{"id":54289825,"uuid":"166966929","full_name":"iconify/iconify-react","owner":"iconify","description":"Iconify icon component for React","archived":false,"fork":false,"pushed_at":"2021-02-08T07:42:41.000Z","size":137,"stargazers_count":206,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-24T17:53:12.512Z","etag":null,"topics":["react","react-icons","reactjs-components","svg-react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/iconify.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-22T09:35:36.000Z","updated_at":"2024-09-07T18:16:00.000Z","dependencies_parsed_at":"2022-08-13T11:10:14.267Z","dependency_job_id":null,"html_url":"https://github.com/iconify/iconify-react","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iconify","download_url":"https://codeload.github.com/iconify/iconify-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230079569,"owners_count":18169421,"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":["react","react-icons","reactjs-components","svg-react"],"created_at":"2024-07-30T23:00:35.439Z","updated_at":"2026-03-03T14:39:44.410Z","avatar_url":"https://github.com/iconify.png","language":"JavaScript","readme":"This repository contains old version 1 of Iconify for React.\n\nThe latest version has been moved to Iconify monorepo: https://github.com/iconify/iconify/tree/master/packages/react\n\n# Iconify for React\n\nIconify is a modern open source SVG alternative to glyph fonts. It is a unified framework, aimed to offer all popular icon sets with one easy to use syntax: Font Awesome, Material Design Icons, Jam Icons and several emoji sets: Noto Emoji, Twemoji, EmojiOne, Firefox OS Emoji.\n\nYou can use over 40,000 icons without installing multiple dependencies. It can also be used with custom and premium icon sets. No fonts, no massive packages.\n\nIconify for React generates separate files for each icon, so when compiling your application only icons you use in project will be bundled. That means you can use FontAwesome, MDI, Vaadin, EmojiOne and other icons on same page without loading massive amounts of data.\n\n## Installation\n\nIf you are using NPM:\n\n```bash\nnpm install @iconify/react\n```\n\nIf you are using Yarn:\n\n```bash\nyarn add @iconify/react\n```\n\nThis package does not include icons. Icons are split into separate packages that available at NPM. See below.\n\n## Usage\n\nInstall `@iconify/react` and packages for selected icon sets. Import Icon and/or InlineIcon from `@iconify/react` and icon data for icon you want to use:\n\n```typescript\nimport { Icon, InlineIcon } from \"@iconify/react\";\nimport home from \"@iconify/icons-mdi-light/home\";\nimport faceWithMonocle from \"@iconify/icons-twemoji/face-with-monocle\";\n```\n\nThen use Icon or InlineIcon component with icon data as \"icon\" parameter:\n\n```html\n\u003cIcon icon={home} /\u003e\n\u003cp\u003eThis is some text with \u003cInlineIcon icon={faceWithMonocle} /\u003e\u003c/p\u003e\n```\n\n## Icon and InlineIcon\n\nBoth components are the same, the only difference is InlineIcon has negative vertical alignment, so it behaves like a glyph.\n\nUse Icon for decorations, InlineIcon if you are migrating from glyph font.\n\n## Properties\n\nYou can pass any custom properties to Icon and InlineIcon.\n\nCustom properties:\n\n* icon - required property, value is icon data.\n* width, height - width and/or height of icon. If one attribute is set, other attribute will be calculated using width/height ratio of icon. Default value is \"1em\".\n* hFlip, vFlip - boolean attributes. You can use them to flip icon vertically or horizontally\n* flip - string attribute, same as hFlip and vFlip. Value is \"horizontal\", \"vertical\" or \"horizontal,vertical\"\n* rotate - rotate icon. Value is number 0-3 (1 = 90deg, 2 = 180deg, 3 = 270deg) or string \"90deg\", \"180deg\", \"270deg\"\n* color - icon color, usable only for colorless icons. By default colorless icons use currentColor, so you can set color using stylesheet by setting text color. This property can override it.\n* align - icon alignment. It matters only when width and height are both set and width/height ratio doesn't match icon ratio. Value is a string that includes any of these values separated by comma: horizontal alignment: \"left\", \"center\", \"right\", vertical alignment: \"top\", \"middle\", \"bottom\", slice: \"meet\", \"slice\". Example: align=\"left,middle,slice\". Default value is \"center,middle,meet\"\n\n## TypeScript\n\nIconify for React is compatible with TypeScript.\n\nIf you are using TypeScript, only attributes \"id\", \"className\" and \"style\" are passed to node. If you want to pass other custom attributes, edit dist/icon.d.ts file (or suggest a change by opening issue on @iconify/react repository).\n\n## Icon Packages\n\nAs of version 1.1.0 this package no longer includes icons. There are over 40k icons, each in its own file. That takes a lot of disc space. Because of that icons were moved to multiple separate packages, one package per icon set.\n\nYou can find all available icons at https://iconify.design/icon-sets/\n\nBrowse or search icons, click any icon and you will see a \"React\" tab that will give you exact code for the React component.\n\nImport format for each icon is \"@iconify/icon-{prefix}/{icon}\" where {prefix} is collection prefix, and {icon} is the icon name.\n\nUsage examples for a few popular icon packages:\n\n### Material Design Icons\n\nPackage: https://www.npmjs.com/package/@iconify/icons-mdi\n\nIcons list: https://iconify.design/icon-sets/mdi/\n\nInstallation:\n\n```bash\nnpm install @iconify/icons-mdi\n```\n\nUsage:\n\n```typescript\nimport { Icon, InlineIcon } from \"@iconify/react\";\nimport home from \"@iconify/icons-mdi/home\";\nimport accountCheck from \"@iconify/icons-mdi/account-check\";\n```\n\n```html\n\u003cIcon icon={home} /\u003e\n\u003cp\u003eThis is some text with \u003cInlineIcon icon={accountCheck} /\u003e\u003c/p\u003e\n```\n\n### Simple Icons (big collection of logos)\n\nPackage: https://www.npmjs.com/package/@iconify/icons-simple-icons\n\nIcons list: https://iconify.design/icon-sets/simple-icons/\n\nInstallation:\n\n```bash\nnpm install @iconify/icons-simple-icons\n```\n\nUsage:\n\n```typescript\nimport { Icon, InlineIcon } from \"@iconify/react\";\nimport behanceIcon from \"@iconify/icons-simple-icons/behance\";\nimport mozillafirefoxIcon from \"@iconify/icons-simple-icons/mozillafirefox\";\n```\n\n```html\n\u003cIcon icon={behanceIcon} /\u003e\n\u003cp\u003eMozilla Firefox \u003cInlineIcon icon={mozillafirefoxIcon} /\u003e is the best browser!\u003c/p\u003e\n```\n\n### Font Awesome 5 Solid\n\nPackage: https://www.npmjs.com/package/@iconify/icons-fa-solid\n\nIcons list: https://iconify.design/icon-sets/fa-solid/\n\nInstallation:\n\n```bash\nnpm install @iconify/icons-fa-solid\n```\n\nUsage:\n\n```typescript\nimport { Icon, InlineIcon } from \"@iconify/react\";\nimport toggleOn from \"@iconify/icons-fa-solid/toggle-on\";\nimport chartBar from \"@iconify/icons-fa-solid/chart-bar\";\n```\n\n```html\n\u003cIcon icon={chartBar} /\u003e\n\u003cp\u003e\u003cInlineIcon icon={toggleOn} /\u003e Click to toggle\u003c/p\u003e\n```\n\n### Noto Emoji\n\nPackage: https://www.npmjs.com/package/@iconify/icons-noto\n\nIcons list: https://iconify.design/icon-sets/noto/\n\nInstallation:\n\n```bash\nnpm install @iconify/icons-noto\n```\n\nUsage:\n\n```typescript\nimport { Icon, InlineIcon } from \"@iconify/react\";\nimport greenApple from \"@iconify/icons-noto/green-apple\";\nimport huggingFace from \"@iconify/icons-noto/hugging-face\";\n```\n\n```html\n\u003cIcon icon={greenApple} /\u003e\n\u003cp\u003eIts time for hugs \u003cInlineIcon icon={huggingFace} /\u003e!\u003c/p\u003e\n```\n\n### Other icon sets\n\nThere are over 50 icon sets. This readme shows only few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.\n\n## License\n\nReact component is released with MIT license.\n\n© 2019 Vjacheslav Trushkin\n\nSee [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.\n","funding_links":[],"categories":["UI Components","JavaScript"],"sub_categories":["Icons"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficonify%2Ficonify-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficonify%2Ficonify-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficonify%2Ficonify-react/lists"}