https://github.com/datalayer/icons
Ξ 🎉 React.js and JupyterLab icons for data products.
https://github.com/datalayer/icons
datalayer design icons jupyter reactjs
Last synced: 8 months ago
JSON representation
Ξ 🎉 React.js and JupyterLab icons for data products.
- Host: GitHub
- URL: https://github.com/datalayer/icons
- Owner: datalayer
- License: other
- Created: 2022-01-12T13:40:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-13T16:08:48.000Z (about 1 year ago)
- Last Synced: 2025-04-13T17:24:28.063Z (about 1 year ago)
- Topics: datalayer, design, icons, jupyter, reactjs
- Language: TypeScript
- Homepage: https://datalayer.design
- Size: 1.05 MB
- Stars: 6
- Watchers: 5
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://datalayer.io)
[](https://github.com/sponsors/datalayer)
# Ξ 🎉 Datalayer Icons
> React.js and JupyterLab icons for data products.
This 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.
The 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).
You 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.
The 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.
Please 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.
We are looking to connect with existing data developers community, like the [Jupyter community](https://github.com/datalayer/icons/issues/31).
## For React.js developers
Add `@datalayer/icons-react` as dependency, import an icon and render it.
```typescript
import { DatalayerGreenIcon } from "@datalayer/icons-react";
render(
)
```
## For JupyterLab developers
[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).
For ease of use, we expose all the icons as `LabIcon` you can import and directly use.
```ts
import { scientistIconLabIcon } from '@datalayer/icons-react/data2/ScientistIconLabIcon';
```
If you need to create you own React component from a SVG, just import the optimized SVG artifact and reuse it in your application.
```ts
import satelliteIconSvg from '@datalayer/icons-react/data2/SatelliteIcon.svg';
```
To load SVG from TypeScript, you will need to create a type declaration file.
```ts
// svg.d.ts
declare module "*.svg" {
const value: any;
export default value;
}
```
## For Data Products Designers
Data Product Designers may add or update the existing icons.
For that, the initial steps is to clone this repository and install the dependencies.
```bash
git clone https://github.com/datalayer/icons
cd icons
yarn
```
Designers will create a SVG and add it in one of the `svg` subfolder of this repository.
To 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.
TODO: Describe the difference between `data1` and `data2`.
```bash
npm run build-icons
```
You can preview the icons running the following command (sometimes the colors do not correspond due to many icons being shown).
```bash
npm start
```
## Stencils
We will work to [create stencils for drawing tools](https://github.com/datalayer/icons/issues/2).
## Theming
We 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.
## For users
You can download a `PNG` or `SVG` version of the icon from https://datalayer.design.
## Icons Gallery
To view an gallery of available icons, run the following commands.
```bash
yarn
npm run build
npm vite
```
## Icon Properties
- `colored` - Display a colored version of the Icon (if available).
- `size`: `"small"` | `"medium"` | `"large"` | `number` - Specify the size of your icon - `"small"` by default.
```typescript
// For example.
```
## SVG Open Sources
These are useful places for open-source SVGs.
- Bootstrap Icons https://github.com/twbs/icons https://icons.getbootstrap.com
- Feather Icons https://github.com/feathericons/feather https://feathericons.com
- HeroIcons https://github.com/tailwindlabs/heroicons https://heroicons.com
- Iconify https://github.com/iconify/iconify https://icon-sets.iconify.design
- Iconmonstr https://iconmonstr.com
- Icons.js https://github.com/antfu/icones https://icones.js.org
- Lobe Icons https://github.com/lobehub/lobe-icons https://icons.lobehub.com
- Lucide https://github.com/lucide-icons/lucide https://lucide.dev
- OpenMoji https://github.com/hfg-gmuend/openmoji https://openmoji.org
- Primer Octicons https://github.com/primer/octicons https://primer.style/foundations/icons
- Radix UI Icons https://github.com/radix-ui/icons https://icons.radix-ui.com
- React Icons https://github.com/react-icons/react-icons https://react-icons.github.io/react-icons
- SVG Repo https://www.svgrepo.com
- Science Icons https://github.com/curvenote/scienceicons
- Simple Icons https://github.com/simple-icons/simple-icons https://simpleicons.org
- Styled Icons https://github.com/styled-icons/styled-icons https://styled-icons.dev
## Releases
Datalayer Icons is released in [Npm.js](https://www.npmjs.com/package/@datalayer/icons-react).
## ⚖️ License
Copyright (c) 2022 Datalayer, Inc.
The icons are released under the terms of the MIT license (see [LICENSE](./LICENSE)).
The 3rd party icons are redistributed for convenience under their respective license.