{"id":15551401,"url":"https://github.com/datalayer/icons","last_synced_at":"2025-10-04T15:07:29.202Z","repository":{"id":54699943,"uuid":"447232679","full_name":"datalayer/icons","owner":"datalayer","description":"Ξ 🎉 React.js and JupyterLab icons for data products.","archived":false,"fork":false,"pushed_at":"2025-04-13T16:08:48.000Z","size":1102,"stargazers_count":6,"open_issues_count":12,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-13T17:24:28.063Z","etag":null,"topics":["datalayer","design","icons","jupyter","reactjs"],"latest_commit_sha":null,"homepage":"https://datalayer.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datalayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"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},"funding":{"github":["datalayer"]}},"created_at":"2022-01-12T13:40:42.000Z","updated_at":"2025-04-01T15:36:50.000Z","dependencies_parsed_at":"2023-12-21T10:44:53.346Z","dependency_job_id":"c8950389-e9c5-4b8b-9b98-4a16095f63fc","html_url":"https://github.com/datalayer/icons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datalayer","download_url":"https://codeload.github.com/datalayer/icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250508592,"owners_count":21442255,"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":["datalayer","design","icons","jupyter","reactjs"],"created_at":"2024-10-02T14:04:46.423Z","updated_at":"2025-10-04T15:07:29.194Z","avatar_url":"https://github.com/datalayer.png","language":"TypeScript","funding_links":["https://github.com/sponsors/datalayer"],"categories":[],"sub_categories":[],"readme":"[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)\n\n[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026style=flat\u0026color=1ABC9C)](https://github.com/sponsors/datalayer)\n \n# Ξ 🎉 Datalayer Icons\n\n\u003e React.js and JupyterLab icons for data products.\n\nThis repository contains a collection of [React.js](https://react.dev) icons useful at [Datalayer](https://datalayer.tech), covering [Jupyter](https://jupyter.org), [Kubernetes](https://kubernetes.io) and other ecosystems.\n\nThe icons are also shipped as [LabIcon](https://github.com/jupyterlab/jupyterlab/blob/main/packages/ui-components/README.md#labicon---set-up-and-render-icons) objects, ready-to use icons in [JupyterLab](https://github.com/jupyterlab/jupyterlab).\n\nYou are welcome to use those icons in your own data product. A preview is available on https://datalayer.design, give us [a star](https://github.com/datalayer/icons/stargazers) ⭐ if you like it.\n\nThe package is published on [NPM.js @datalayer/icons-react](https://www.npmjs.com/package/@datalayer/icons-react) and can be added as dependency on any JavaScript or TypeScript project.\n\n\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\n  \u003cimg alt=\"Datalayer Icons\" src=\"https://assets.datalayer.tech/datalayer-icons-react.gif\" /\u003e\n\u003c/div\u003e\n\nPlease open an [issue](https://github.com/datalayer/icons/issues) or a [pull request](https://github.com/datalayer/icons/pulls) to update, add... your icons or for any suggestion, question about this repository content.\n\nWe are looking to connect with existing data developers community, like the [Jupyter community](https://github.com/datalayer/icons/issues/31).\n\n## For React.js developers\n\nAdd `@datalayer/icons-react` as dependency, import an icon and render it.\n\n```typescript\nimport { DatalayerGreenIcon } from \"@datalayer/icons-react\";\n\nrender(\n  \u003cDatalayerGreenIcon/\u003e\n  \u003cDatalayerGreenIcon size=\"large\" colored/\u003e\n)\n```\n\n## For JupyterLab developers\n\n[JupyterLab](https://github.com/jupyterlab/jupyterlab) icons need to be created with the [LabIcon](https://github.com/jupyterlab/jupyterlab/blob/main/packages/ui-components/README.md#labicon---set-up-and-render-icons) class. JupyterLab machinary are some restrictions as not being able to create a `LabIcon` from a React.js component (though being able to export a React.js component from a LabIcon), or not being able to load a SVG from a remote location (like a HTTP or S3 server).\n\nFor ease of use, we expose all the icons as `LabIcon` you can import and directly use.\n\n```ts\nimport { scientistIconLabIcon } from '@datalayer/icons-react/data2/ScientistIconLabIcon';\n```\n\nIf you need to create you own React component from a SVG, just import the optimized SVG artifact and reuse it in your application.\n\n```ts\nimport satelliteIconSvg from '@datalayer/icons-react/data2/SatelliteIcon.svg';\n```\n\nTo load SVG from TypeScript, you will need to create a type declaration file.\n\n```ts\n// svg.d.ts\ndeclare module \"*.svg\" {\n  const value: any;\n  export default value;\n}\n```\n\n## For Data Products Designers\n\nData Product Designers may add or update the existing icons.\n\nFor that, the initial steps is to clone this repository and install the dependencies.\n\n```bash\ngit clone https://github.com/datalayer/icons\ncd icons\nyarn\n```\n\nDesigners will create a SVG and add it in one of the `svg` subfolder of this repository.\n\nTo add an icon to this repository, add the SVG (preferably of viewBox `0 0 20 20`) of the icon one of the `svg` sub-folder. Then run the following commands.\n\nTODO: Describe the difference between `data1` and `data2`.\n\n```bash\nnpm run build-icons\n```\n\nYou can preview the icons running the following command (sometimes the colors do not correspond due to many icons being shown).\n\n```bash\nnpm start\n```\n\n## Stencils\n\nWe will work to [create stencils for drawing tools](https://github.com/datalayer/icons/issues/2).\n\n## Theming\n\nWe aim to support [Primer React](https://primer.style/react/theming), [JupyterLab](https://github.com/jupyterlab/jupyterlab/blob/main/packages/ui-components/README.md#labicon---set-up-and-render-icons) as [Docusaurus](https://docusaurus.io) themings.\n\n## For users\n\nYou can download a `PNG` or `SVG` version of the icon from https://datalayer.design.\n\n## Icons Gallery\n\nTo view an gallery of available icons, run the following commands.\n\n```bash\nyarn\nnpm run build\nnpm vite\n```\n\n## Icon Properties\n\n- `colored` - Display a colored version of the Icon (if available).\n- `size`: `\"small\"` | `\"medium\"` | `\"large\"` | `number` - Specify the size of your icon - `\"small\"` by default.\n\n```typescript\n// For example.\n\u003cDatalayerIcon colored size=\"large\"/\u003e\n```\n\n## SVG Open Sources\n\nThese are useful places for open-source SVGs.\n\n- Bootstrap Icons https://github.com/twbs/icons https://icons.getbootstrap.com\n- Feather Icons https://github.com/feathericons/feather https://feathericons.com\n- HeroIcons https://github.com/tailwindlabs/heroicons https://heroicons.com\n- Iconify https://github.com/iconify/iconify https://icon-sets.iconify.design\n- Iconmonstr https://iconmonstr.com\n- Icons.js https://github.com/antfu/icones https://icones.js.org\n- Lobe Icons https://github.com/lobehub/lobe-icons https://icons.lobehub.com\n- Lucide https://github.com/lucide-icons/lucide https://lucide.dev\n- OpenMoji https://github.com/hfg-gmuend/openmoji https://openmoji.org\n- Primer Octicons https://github.com/primer/octicons https://primer.style/foundations/icons\n- Radix UI Icons https://github.com/radix-ui/icons https://icons.radix-ui.com\n- React Icons https://github.com/react-icons/react-icons https://react-icons.github.io/react-icons\n- SVG Repo https://www.svgrepo.com\n- Science Icons https://github.com/curvenote/scienceicons\n- Simple Icons https://github.com/simple-icons/simple-icons https://simpleicons.org\n- Styled Icons https://github.com/styled-icons/styled-icons https://styled-icons.dev\n\n## Releases\n\nDatalayer Icons is released in [Npm.js](https://www.npmjs.com/package/@datalayer/icons-react).\n\n## ⚖️ License\n\nCopyright (c) 2022 Datalayer, Inc.\n\nThe icons are released under the terms of the MIT license (see [LICENSE](./LICENSE)).\n\nThe 3rd party icons are redistributed for convenience under their respective license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatalayer%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer%2Ficons/lists"}