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

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

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

Adding Cloud Brand Icons

For cloud provider logos such as AWS, Docker, or Terraform, use the brand variants from primitive-icons.md. These pre-filled icons also utilize currentColor, enabling you to recolor them to match brand accents or diagram themes.

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

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 and viewable in 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.
• 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}