{"id":31925431,"url":"https://github.com/carbon-design-system/icons-motion","last_synced_at":"2025-10-14T00:56:48.037Z","repository":{"id":61186659,"uuid":"542765063","full_name":"carbon-design-system/icons-motion","owner":"carbon-design-system","description":"A library of animated Carbon icons","archived":false,"fork":false,"pushed_at":"2025-09-08T01:46:31.000Z","size":10227,"stargazers_count":20,"open_issues_count":69,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-09-13T22:52:45.105Z","etag":null,"topics":["animation","css","hacktoberfest","javascript","microinteractions","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"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/carbon-design-system.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2022-09-28T19:43:22.000Z","updated_at":"2025-05-18T15:02:13.000Z","dependencies_parsed_at":"2023-02-16T03:15:53.192Z","dependency_job_id":"d4945f5f-12d2-4380-8284-ae64b7c2a93a","html_url":"https://github.com/carbon-design-system/icons-motion","commit_stats":{"total_commits":321,"total_committers":15,"mean_commits":21.4,"dds":0.4828660436137072,"last_synced_commit":"7845920e09a2d10f647c2fd71936695cdc6222f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/carbon-design-system/icons-motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Ficons-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Ficons-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Ficons-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Ficons-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbon-design-system","download_url":"https://codeload.github.com/carbon-design-system/icons-motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Ficons-motion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017339,"owners_count":26086053,"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":["animation","css","hacktoberfest","javascript","microinteractions","react"],"created_at":"2025-10-14T00:56:43.668Z","updated_at":"2025-10-14T00:56:48.030Z","avatar_url":"https://github.com/carbon-design-system.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Carbon Icon Animations\n\nThis is a package of animated icons which mirrors the icons in [Carbon Design System](https://carbondesignsystem.com/guidelines/icons/library/) icons.\nIt enables developers to import an animated icon directly from this library, in place of importing the existing static icon from the Carbon Design System library. The animated icons are implemented as React components. Since they do not make use of Carbon's icon components directly, they are not tied to a specific version of Carbon, and can be used in any React project.\n\nCheck out what the animations look like in this [example app](https://carbon-design-system.github.io/icons-motion/).\n\nWe will be adding onto this library one category at a time - the current release includes the **Navigation** icons and **Operations** icons. The **Formatting** icons are currently in progress, and toggle icons are being worked on as well.  \nIf you want to request an icon/category to be animated, please open an issue using the **New icon animation** template. Working together with the Carbon team, we will prioritize the categories that will be most frequently used.\n\nWe will do our very best to keep these icons in sync with the Carbon icons but if there is a change to the Carbon icon, it may not yet be reflected in our library- if you encounter this, please open a **Update icon animation** issue to alert us.  \n\u003cbr /\u003e\n\n## Using the icons\n\n### Installation\n\nTo use the icons in your project, first install the package:\n\n```bash\nnpm install @carbon/icons-motion\n```\n\n### Usage\n\nExample:\nHow to import and use the icon component and CSS file from the package.\n\nThis example shows how to import one specific icon `HomeMotion` and use it a component in an app.\n\nApp.js\n\n```jsx\nimport { HomeMotion } from '@carbon/icons-motion'\nimport '@carbon/icons-motion/dist/index.css'\n\nconst myComponent = () =\u003e \u003cHomeMotion isAnimating={false} size={32} /\u003e\n```\n\nThe component takes two props:\n\n- `isAnimating` is a boolean; to trigger the animation, change this prop to `true`\n- `size` is an integer which will set the width and height of the icon in px\n\n**Important** Your app will need to update the `isAnimating` prop to `true` in order to make the icon animate. You can decide when/how this prop change should be triggered, depending on your specific use case.\n\nExample:\nHere's how to make an icon animate on mouseEnter of the `div` with the className of `icon-tile`, similar to the examples shown in the demo app at `./example/src/components/NavigationSection folder`.\n\nNote in this example, all icons are imported as `*` so to use the specific icon, use `\u003cicons.IconName\u003e`\n\nApp.js\n\n```jsx\nimport React, { useState } from 'react'\nimport * as icons from '@carbon/icons-motion'\nimport '@carbon/icons-motion/dist/index.css'\n\nconst [homeAnimating, setHomeAnimating] = useState(false)\n\nfunction App() {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cdiv\n        className='icon-tile'\n        onMouseEnter={() =\u003e setHomeAnimating(true)}\n        onMouseLeave={() =\u003e setHomeAnimating(false)}\n      \u003e\n        \u003ch3\u003eHome\u003c/h3\u003e\n        \u003cicons.HomeMotion isAnimating={homeAnimating} size={32} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nAdditional examples coming soon!\n\n\u003cbr /\u003e\n\n## Contributing\n\nWe welcome everyone who would like to contribute! Check out our [Contribution guidelines](https://github.com/carbon-design-system/icons-motion/blob/main/.github/CONTRIBUTING.md) to get started, and don't hesitate to reach out if you have any questions!\n\n[All Contributors](https://github.com/all-contributors/all-contributors) table coming soon!\n\n## Feedback\n\nThis library is in constant evolution, and we welcome any feedback to help it improve!\n\nWe'd especially love feedback in the following areas:\n\n- New icons needed - propose additional icons you would like to see animated\n- Animation feedback - too fast/slow/bouncy/whatever; conformance to existing animation guidelines\n- Package feedback - improvements to code quality, efficiency, dependencies etc related to the actual package icon components\n- Example app feedback - ideas on how to make the included demo app super engaging\n- Documentation feedback - Is the ReadMe clear? Did you have the information you needed to successfully edit/create icons, or use icons in your project?\n- Implementation feedback - Did the icons work for your use case? Did you need different props?\n\n\u003cbr /\u003e\n\n## Contributors\n\nThis effort is lead by the Animated Icon Workgroup members: @kristastarr, @johnbister, @Motion-Mike, @silvio-hajdin\n\n\u003cbr /\u003e\n\n## \u003cpicture\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg\"\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003cimg height=\"20\" width=\"20\" alt=\"IBM Telemetry\" src=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003c/picture\u003e IBM Telemetry\n\nThis package uses IBM Telemetry to collect metrics data. By installing this package as a dependency\nyou are agreeing to telemetry collection. To opt out, see\n[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).\nFor more information on the data being collected, please see the\n[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).\n\n\u003cbr /\u003e\n\n## License\n\nLicensed under the [Apache 2.0 License](https://github.com/carbon-design-system/carbon-motion/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Ficons-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbon-design-system%2Ficons-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Ficons-motion/lists"}