# How to Add IT or Cloud Icons to Architecture Diagrams Using Diagram Design

> Easily add IT or cloud icons to architecture diagrams. Learn how to use the Diagram Design Icons primitive to embed monochrome SVG icons directly into your diagrams.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-08-20

---

**Use the built-in Icons primitive from the Diagram Design skill to embed any of 55 monochrome SVG icons—such as servers, clouds, or AWS logos—by copying the SVG definition from [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) and wrapping it in a `<g>` transform group for positioning.**

The **Diagram Design** skill in the `cathrynlavery/diagram-design` repository provides a comprehensive solution for adding IT and cloud icons to architecture diagrams. With 55 curated monochrome SVG icons ranging from infrastructure components like servers and Kubernetes pods to cloud provider brands, you can enhance technical diagrams without external dependencies. This guide explains how to locate, embed, and style these icons using the skill's built-in primitive system.

## Understanding the Icons Primitive

The Icons primitive is defined in [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md) and ships with 55 IT and cloud-related SVG icons. Each icon uses `currentColor` for stroke or fill, allowing automatic inheritance of the diagram's ink color or any custom CSS color applied to parent elements. All icons conform to a 24×24 pixel grid, aligning perfectly with the Diagram Design skill's 4-pixel spacing system.

Because every icon is bundled with the skill, no additional network calls or dependencies are required. The icons render purely client-side and are compatible with architecture diagrams, sequence diagrams, flowcharts, and any other diagram type generated by the skill.

## Locating Icons in the Repository

### Visual Selection via the Icon Gallery

For visual browsing, open [`skills/diagram-design/assets/icons.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/icons.html) in your browser. This interactive gallery displays all available icons and allows you to click any icon to copy its SVG snippet directly to your clipboard. This file serves as the primary interface for discovering available symbols like laptops, servers, pods, or AWS logos.

### Source Definitions in Primitive Icons

The canonical SVG definitions reside in [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md). Each icon appears under an H3 heading matching its name (e.g., `### cloud`, `### server`, `### brand-aws`). Copy the SVG block beneath the heading to use the icon in your diagrams.

## Embedding Icons in Architecture Diagrams

### Basic HTML Embedding

Insert the SVG directly into your diagram's HTML template. Because the icons use `currentColor`, they automatically match the surrounding text color or CSS variables defined in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md).

```html
<!-- Cloud icon at position (150, 80) scaled 2x -->
<g transform="translate(150,80) scale(2)">
  <svg aria-hidden="true" width="24" height="24"
       viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.5"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"/>
  </svg>
</g>

```

### Positioning with Transform Groups

Wrap icons in a `<g>` element with `transform` attributes to place them precisely within your architecture diagrams. The `translate(x,y)` function positions the icon, while `scale(s)` adjusts its size relative to the default 24×24 viewport.

### Styling and Theming

Set the `color` property on the parent `<g>` or `<svg>` element to style icons. The `currentColor` value in the SVG definition ensures the stroke or fill inherits this value, maintaining visual consistency with your diagram's theme defined in [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md).

## Adding Cloud Brand Icons

For cloud provider logos such as AWS, Docker, or Terraform, use the brand variants from [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md). These pre-filled icons also utilize `currentColor`, enabling you to recolor them to match brand accents or diagram themes.

```html
<!-- AWS logo in a sequence diagram -->
<g transform="translate(600,20) scale(1.5)" style="color: var(--color-accent)">
  <svg aria-hidden="true" width="24" height="24"
       viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.5"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="M17 18.5a15.198 15.198 0 0 1 -7.37 1.44a14.62 14.62 0 0 1 -6.63 -2.94"/>
    <path d="M19.5 21c.907 -1.411 1.451 -3.323 1.5 -5c-1.197 -.773 -2.577 -.935 -4 -1"/>
    <path d="M3 11v-4.5a1.5 1.5 0 0 1 3 0v4.5"/>
    <path d="M3 9h3"/>
    <path d="M9 5l1.2 6l1.8 -4l1.8 4l1.2 -6"/>
    <path d="M18 10.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/>
  </svg>
</g>

```

## Programmatic Icon Generation

When generating diagrams dynamically, store SVG snippets in a JavaScript map and inject them via helper functions. This approach ensures consistent positioning and styling across architecture, sequence, and flowchart diagrams.

```javascript
const ICONS = {
  cloud: `<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"/></svg>`,
  server: `<svg>...</svg>`,
  pod: `<svg>...</svg>`
};

function icon(name, x, y, scale = 1, color = 'currentColor') {
  return `
    <g transform="translate(${x},${y}) scale(${scale})" style="color:${color}">
      ${ICONS[name] || ''}
    </g>`;
}

// Example usage inside an HTML template:
const diagramHTML = `
  <svg width="600" height="300">
    ${icon('cloud', 100, 50, 1.5, 'var(--color-accent)')}
    ${icon('server', 300, 120, 1, 'var(--color-ink)')}
  </svg>`;

```

## Summary

- The **Icons primitive** in `cathrynlavery/diagram-design` provides 55 monochrome IT and cloud SVG icons requiring no external network calls.
- Icons are defined in [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md) and viewable in [`skills/diagram-design/assets/icons.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/icons.html).
- Use **`currentColor`** for automatic color inheritance from parent elements or CSS variables defined in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md).
- Wrap icons in `<g transform="translate(x,y) scale(s)">` to position and scale them within any diagram type.
- Brand icons (AWS, Docker, etc.) follow the same embedding pattern and licensing (MIT/CC0).

## Frequently Asked Questions

### How do I change the color of an icon in Diagram Design?

Set the `color` CSS property on the parent `<g>` or `<svg>` element that wraps the icon. Because every icon in [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) uses `currentColor` for its stroke or fill attributes, it automatically inherits the parent's color value without manual SVG editing.

### Can I use these icons in commercial architecture diagrams?

Yes. All icons in the Diagram Design skill are sourced from Tabler Icons and Simple Icons under MIT or CC0 licenses. You can freely use them in commercial or open-source diagrams without attribution requirements.

### What is the default size of IT and cloud icons?

Each icon defaults to a 24×24 pixel viewport, designed to align with the Diagram Design skill's 4-pixel grid system. You can scale icons using the `scale()` transform function, typically applying factors of 1, 1.5, or 2 for standard diagram elements.

### How do I add a specific cloud brand like AWS or Kubernetes?

Locate the brand-specific variant in [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md) under headings like `### brand-aws` or `### pod`. Copy the SVG snippet and embed it using the same `<g>` transform wrapper as standard icons. Brand icons also use `currentColor`, allowing theme consistency with infrastructure icons.