{"id":20146193,"url":"https://github.com/evoluteur/react-crud-icons","last_synced_at":"2026-04-04T13:39:44.465Z","repository":{"id":65387947,"uuid":"205624281","full_name":"evoluteur/react-crud-icons","owner":"evoluteur","description":"67 SVG icons for CRUD applications, packaged as a React component with light \u0026 dark themes and tooltip.","archived":false,"fork":false,"pushed_at":"2025-01-17T02:58:45.000Z","size":661,"stargazers_count":49,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T09:08:55.442Z","etag":null,"topics":["button-animation","crud","crud-app","crud-application","icon","icon-pack","icon-set","icons","iconset","inline-svg","material-design","material-ui","react","react-component","react-components","svg","svg-icons","svg-sprites","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://evoluteur.github.io/react-crud-icons/","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/evoluteur.png","metadata":{"files":{"readme":"README.md","changelog":null,"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},"funding":{"github":"evoluteur"}},"created_at":"2019-09-01T03:26:43.000Z","updated_at":"2025-03-19T21:08:57.000Z","dependencies_parsed_at":"2024-06-19T16:02:29.914Z","dependency_job_id":"a413f000-4aa0-4071-8f0a-6a0737415218","html_url":"https://github.com/evoluteur/react-crud-icons","commit_stats":{"total_commits":52,"total_committers":1,"mean_commits":52.0,"dds":0.0,"last_synced_commit":"35c8ebf4d5fdabf1c95d85b774620367139815aa"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Freact-crud-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Freact-crud-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Freact-crud-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Freact-crud-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evoluteur","download_url":"https://codeload.github.com/evoluteur/react-crud-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["button-animation","crud","crud-app","crud-application","icon","icon-pack","icon-set","icons","iconset","inline-svg","material-design","material-ui","react","react-component","react-components","svg","svg-icons","svg-sprites","ui","ui-components"],"created_at":"2024-11-13T22:20:23.575Z","updated_at":"2026-04-04T13:39:44.424Z","avatar_url":"https://github.com/evoluteur.png","language":"JavaScript","funding_links":["https://github.com/sponsors/evoluteur"],"categories":[],"sub_categories":[],"readme":"# React-CRUD-Icons \u0026middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/react-crud-icons)](https://github.com/evoluteur/react-crud-icons/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react-crud-icons)](https://www.npmjs.com/package/react-crud-icons)\n\n**React-CRUD-Icons** is a set of SVG icons for CRUD (Create, Read, Update, Delete) apps, implemented as a React component with light \u0026 dark themes and tooltip.\n\nCheck out [React-CRUD-Icons live demo](https://evoluteur.github.io/react-crud-icons/).\n\n### 67 SVG Icons\n\nA set of icons for CRUD applications... hand-picked among thousands at [Material Design Icons](https://materialdesignicons.com/).\n\n![Screenshot](screenshots/react-crud-icons.png)\n\n\u003ca name=\"themes\"\u003e\u003c/a\u003e\n\n### 2 Themes\n\nThemes: light, dark.\n\n![Screenshot](screenshots/hover.gif)\n\nTo disable the icon hover effect, set theme = \"none\". It will only render the SVG without CSS classes.\n\n### 6 Sizes\n\nSizes: tiny, small, medium, large, big, huge.\n\n![Screenshot](screenshots/sizes.gif)\n\nFor really large size icons, checkout the [T-Shirts](https://www.redbubble.com/people/evoluteur/shop?artistUserName=evoluteur\u0026collections=4052365\u0026iaCode=all-departments) ;-)\n\n\n## Installation\n\nThe package can be installed via [npm](https://www.npmjs.com/package/react-crud-icons):\n\n```\nnpm install react-crud-icons --save\n```\n\nYou’ll need to install React and PropTypes separately since those dependencies aren't included in the package.\n\nTo rebuild the project:\n\n```\nnpm install\nnpm run build\n```\n\n## Usage\n\nBelow is a simple example of how to use the component in a React view. You will also need to include the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).\n\n```js\nimport React from \"react\";\nimport Icon from \"react-crud-icons\";\n\nimport \"react-crud-icons/dist/react-crud-icons.css\";\n\nconst ExampleComponent = () =\u003e (\n  \u003cIcon\n    name=\"edit\"\n    tooltip=\"Edit\"\n    theme=\"light\"\n    size=\"medium\"\n    onClick={doSomething}\n  /\u003e\n);\n```\n\nNotes:\n\n- Icons only take focus on tab when the \"onClick\" property is set and they are not disabled.\n- The component uses inline SVG for faster display.\n\n## Properties\n\n| Prop      | Description              |\n|-----------|--------------------------|\n| name      | Possible values: \"account\", \"add\", \"add2\", \"alert\", \"apps\", \"arrow-left\", \"arrow-right\", \"bars\", \"browse\", \"calendar\", \"cards\", \"check\", \"chevron-down\", \"chevron-up\", \"clone\", \"close\", \"collapse\", \"comment\", \"comments\", \"compare\", \"copy\", \"dashboard\", \"delete\", \"documentation\", \"dots\", \"dots-v\", \"down\", \"download\", \"drag\", \"edit\", \"error\", \"expand\", \"export\", \"favorite\", \"filter\", \"help\", \"hide\", \"history\", \"home\", \"home-circle\", \"image\", \"import\", \"info\", \"json\", \"link\", \"list\", \"list-bulleted\", \"lock\", \"lock-open\", \"map-marker\", \"moon\", \"paperclip\", \"pie\", \"print\", \"remove\", \"save\", \"search\", \"settings\", \"show\", \"sort\", \"stats\", \"sun\", \"treemap\", \"undo\", \"up\", \"upload\", \"wand\". |\n| size      | Possible values: \"tiny\", \"small\", \"medium\", \"large\", \"big\", \"huge\". |\n| theme     | Possible values: \"light\", \"dark\". Use theme=\"none\" to display raw SVG without the CSS classes and hover effect.|\n| tooltip   | Tooltip text shown on hover. |\n| disabled  | Disable click event (icon in grey). |\n| onClick   | Callback function triggered when icon is clicked. If empty, there will be no hover effect on the icon. |\n| className | Additional CSS class name. |\n\n\n## T-Shirts\n\nIf you don't have a computer or if your screen is not big enough, I'm also providing [icons on T-Shirts](https://www.redbubble.com/people/evoluteur/shop?artistUserName=evoluteur\u0026collections=4052365\u0026iaCode=all-departments).\n\n[![Screenshot](screenshots/lol.jpg)](https://www.redbubble.com/people/evoluteur/shop?artistUserName=evoluteur\u0026collections=4052365\u0026iaCode=all-departments)\n\n\n## License\n\nCopyright (c) 2025 [Olivier Giulieri](https://evoluteur.github.io/).\n\nReact-CRUD-Icons is Open Source wih [MIT license](http://github.com/evoluteur/react-crud-icons/blob/master/LICENSE).\n\nTo suggest a feature or report a bug: [https://github.com/evoluteur/react-crud-icons/issues](https://github.com/evoluteur/react-crud-icons/issues)\n\nNotes: React-CRUD-Icons was originaly made for [Evolutility-UI-React](https://github.com/evoluteur/evolutility-ui-react).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Freact-crud-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevoluteur%2Freact-crud-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Freact-crud-icons/lists"}