@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.