@ningz6/cloudscape-aws-icons

AWS service icons for the Cloudscape Design System.

Provides 773 AWS architecture icons as React SVG components, compatible with the Cloudscape <Icon> component via IconProvider and defineIcons.

Installation

npm install @ningz6/cloudscape-aws-icons

Peer dependencies: @cloudscape-design/components >= 3.0.0, react >= 16.8.0

Quick start

import IconProvider, { defineIcons } from "@cloudscape-design/components/icon-provider";
import type { IconMap } from "@cloudscape-design/components/icon-provider";
import Icon from "@cloudscape-design/components/icon";
import { awsServiceIcons } from "@ningz6/cloudscape-aws-icons";

// Register the icons
const icons = defineIcons(awsServiceIcons);

// Augment the type registry so TypeScript knows about the new names
declare module "@cloudscape-design/components/icon-provider" {
  interface IconRegistry extends IconMap<typeof icons> {}
}

function App() {
  return (
    <IconProvider icons={icons}>
      <Icon name="aws-lambda" />
      <Icon name="aws-simple-storage-service" />
      <Icon name="aws-dynamodb" />
    </IconProvider>
  );
}

Icon sets

The package provides four icon sets, each available as a separate entry point for tree-shaking:

Entry point	Import	Prefix	Count	Description
Main	@ningz6/cloudscape-aws-icons	aws-	773	All icons combined
Service	@ningz6/cloudscape-aws-icons	aws-	306	Architecture service icons (Lambda, S3, DynamoDB, etc.)
Category	@ningz6/cloudscape-aws-icons/category-icons	aws-category-	25	Category icons (Compute, Storage, Database, etc.)
Resource	@ningz6/cloudscape-aws-icons/resource-icons	aws-resource-	429	Resource-level icons (EC2 Instance, Lambda Function, etc.)
Group	@ningz6/cloudscape-aws-icons/group-icons	aws-group-	13	Architecture group icons (VPC, Region, Subnet, etc.)

Loading only what you need

// All icons (largest bundle)
import { awsIcons } from "@ningz6/cloudscape-aws-icons";

// Only service icons
import { awsServiceIcons } from "@ningz6/cloudscape-aws-icons";

// Only category icons
import { awsCategoryIcons } from "@ningz6/cloudscape-aws-icons/category-icons";

// Only resource icons
import { awsResourceIcons } from "@ningz6/cloudscape-aws-icons/resource-icons";

// Only group icons
import { awsGroupIcons } from "@ningz6/cloudscape-aws-icons/group-icons";

// Combine specific sets
const icons = defineIcons({
  ...awsServiceIcons,
  ...awsCategoryIcons,
});

Coloured vs monochrome

Each icon set ships two variants:

• Default (coloured): icons use their original AWS brand colours (e.g. orange for Compute, purple for Database, teal for AI)
• Mono (*Mono): icons use fill="currentColor", inheriting the text colour from the parent element

import {
  awsServiceIcons, // Coloured — original AWS brand colours
  awsServiceIconsMono, // Monochrome — inherits currentColor
} from "@ningz6/cloudscape-aws-icons";

// Use coloured icons by default
const icons = defineIcons(awsServiceIcons);

// Or use monochrome to match surrounding text/theme
const monoIcons = defineIcons(awsServiceIconsMono);

The mono variant is useful when icons should blend with text (sidebars, table cells, breadcrumbs) rather than stand out with brand colours.

Icon names

Icon names follow the Cloudscape convention of lowercase kebab-case with an aws- prefix.

Service icons (306)

Derived from the AWS Architecture Service Icon filenames with the Amazon-/AWS- vendor prefix stripped. Examples:

Icon name	AWS Service
aws-lambda	AWS Lambda
aws-simple-storage-service	Amazon S3
aws-dynamodb	Amazon DynamoDB
aws-ec2	Amazon EC2
aws-cloudfront	Amazon CloudFront
aws-bedrock	Amazon Bedrock
aws-api-gateway	Amazon API Gateway

Category icons (25)

Icon name	Category
aws-category-compute	Compute
aws-category-storage	Storage
aws-category-database	Database
aws-category-networking-content-delivery	Networking & Content Delivery
aws-category-security-identity-compliance	Security, Identity & Compliance

Resource icons (429)

Icon name	Resource
aws-resource-ec2-instance	EC2 Instance
aws-resource-lambda-lambda-function	Lambda Function
aws-resource-simple-storage-service-bucket	S3 Bucket

Group icons (13)

Icon name	Group
aws-group-virtual-private-cloud-vpc	VPC
aws-group-region	Region
aws-group-private-subnet	Private Subnet
aws-group-public-subnet	Public Subnet

TypeScript support

The package exports type unions for each icon set:

import type {
  AwsIconName, // All icon names
  AwsServiceIconName, // Service icon names only
  AwsCategoryIconName, // Category icon names only
  AwsResourceIconName, // Resource icon names only
  AwsGroupIconName, // Group icon names only
} from "@ningz6/cloudscape-aws-icons";

Using with <Icon> component directly

You can also use individual icons via the svg slot without IconProvider:

import Icon from "@cloudscape-design/components/icon";
import { awsServiceIcons } from "@ningz6/cloudscape-aws-icons";

function LambdaIcon() {
  return <Icon svg={awsServiceIcons["aws-lambda"]} />;
}

Regenerating icons

To regenerate from a new AWS asset package:

1. Download the AWS Architecture Icons asset package
2. Extract it to ./assets/
3. Run npm run generate

The expected directory structure under ./assets/:

assets/
  Architecture-Service-Icons_MMDDYYYY/
  Category-Icons_MMDDYYYY/
  Resource-Icons_MMDDYYYY/
  Architecture-Group-Icons_MMDDYYYY/

Or set ASSET_PACKAGE_DIR to point to the extracted package:

ASSET_PACKAGE_DIR=/path/to/Asset-Package npm run generate

License

Apache-2.0. AWS Architecture Icons are provided under the AWS Architecture Icons Agreement.