Isopacks

This library brings together various collections of popular networking and cloud icons in one central place.

You can drag and drop them as images into slides and documents, or import them into JavaScript / Typescript projects. Many of the icons are maintained and provided by popular cloud service providers (e.g. AWS, GCP and Azure), some are available through community projects (see the Kubernetes icon project) and the more general icons are provided by the folks at Isoflow.io.

Please read the LICENSE files associated with each Isopack.

Do I need Isoflow to use these icons?

No. You can use these with your tool of choice. However, if you're looking for a diagramming tool that supports these icons out of the box, we'd highly recommend Isoflow.io.

What's in it

For a complete set of icons available, see this page.

How to use

$3

See the Isoflow documentation here: Importing Isopacks

$3

Icons can be imported and displayed as base64 encoded images (although make sure to consider the tradeoffs of importing using this method).

1. Install the npm package
``bash
npm install @isoflow/isopacks
`

2. Import the collections you want to use:

`jsx
import awsIsopack from '@isoflow/isopacks/dist/aws';

const MyComponent = () => {
return (
<>
{awsIsopack.icons.map(icon => )}

)
}
`

Self-hosting icons vs importing from the package

- Importing icons directly from the npm package is practical but not recommended as it adds to the final bundle size.

- Referencing icons via URL enables the icons to be downloaded after the app loads. This is the recommended approach for production apps.

Contributing

For bugs, feature requests, and discussions please use Github Issues.

$3

As a convention, the id of an Isopack icon should be the same as the icon's SVG filename (without the .svg extension).
This makes it easy to derive id`s from the file structure.