AWS architecture icons in an npm package

How to include the official AWS icons in a React app

Author's image
Tamás Sallai
3 mins

AWS icons

AWS provides a set of icons that can be used in architecture diagrams for AWS-based apps. They look great, cover most of the services, and provide a familiar style for users whenever they are used.

I wanted to use these icons in a React application and I found that the way AWS publishes them is not easy to integrate. These icons come in a zip file with other zip files inside it, and that makes it hard to include in an npm-based package.

That's why the aws-svg-icons package was born.

Example diagram

How to use

The package contains all the SVG files from the asset file, recursively unzipping all archives inside. It keeps the original directory structure, except for the topmost folder, so it will be easy to update to new versions when they are released.

To see what's inside, head over to unpkg for a list: https://unpkg.com/browse/aws-svg-icons/.

To include these icons in your webapp, first install it with npm:

npm install aws-svg-icons

Then in your React app import the image file:

import lambdaIcon from "aws-svg-icons/lib/Arch_Compute/64/Arch_AWS-Lambda_64.svg";

<img src={lambdaIcon}/>

If a loader is configured to handle .svg files in the Webpack config (or any other bundler you're using) then the Lambda icon will be shown.

As an extra touch, bundlers are smart enough to know which icons are loaded and they only include those in the bundle. Unused images won't beef up your webapp.

What icons are in there?

You can browse them here: https://sashee.github.io/aws-svg-icons/index.html (Warning: >6 Mb).

Icons

This page provides an easy-to-use reference to choose the icon you need. Click on any of them to copy its path to the clipboard and paste it to the import statement. It's that easy.

Here's a short video on how to use it: