Diagram Design Icon Set Composition and currentColor Inheritance Explained

The Diagram Design icon set is a 55-icon monochrome library combining Tabler Icons (stroked UI symbols) and Simple Icons (filled brand logos), with both using currentColor to inherit color from ancestor SVG elements.

This architecture- and sequence-diagram toolkit maintains visual consistency through a single inheritance mechanism. The icons adapt automatically to light, dark, or custom editorial themes without requiring individual color adjustments.

What Composes the 55-Icon Library

The Diagram Design icon set sources from two established open-source collections, as documented in skills/diagram-design/references/primitive-icons.md:

• Tabler Icons — Generic UI-style symbols including device-laptop, server, and cloud. These are stroked icons with hairline 1.5 px outlines, licensed MIT.

• Simple Icons — Brand logos including aws, docker, and kubernetes. These are filled icons with solid shapes, licensed CC0.

All icons share a uniform 24 × 24 px viewBox. This consistent sizing enables predictable placement in diagram compositions and maintains alignment across mixed icon types.

How currentColor Inheritance Works

The currentColor CSS keyword enables automatic color propagation from parent elements. According to the source implementation, Diagram Design leverages this through two patterns:

Icon Source	Attribute Pattern	Inheritance Behavior
Tabler Icons	stroke="currentColor"	Outline color matches ancestor color value
Simple Icons	fill="currentColor"	Solid shape color matches ancestor color value

When an icon resides inside a <g> or <svg> element with a defined color, fill, or stroke property, the icon adopts that value immediately. This occurs through standard CSS cascade rules—no JavaScript or preprocessing required.

The color tokens defined in skills/diagram-design/references/style-guide.md—ink, accent, paper, and others—flow into the SVG hierarchy as CSS variables or direct values, which currentColor then picks up.

Practical Implementation Examples

Stroked Tabler Icon with Ink Color

This example demonstrates a laptop icon inheriting the dark "ink" color:

<svg width="100" height="100" style="color:#111;">
  <g transform="translate(10,10) scale(2)">
    <!-- laptop icon – uses stroke="currentColor" -->
    <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="M3 19l18 0"/>
      <path d="M5 7a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -8"/>
    </svg>
  </g>
</svg>

The stroke="currentColor" attribute on the inner <svg> pulls the #111 value from the outer element's style="color:#111;".

Filled Simple Icon with Accent Color

This Docker logo demonstrates filled shape inheritance:

<svg width="100" height="100" style="color:#eb6c36;">
  <g transform="translate(10,50) scale(2)">
    <!-- docker icon – uses fill="currentColor" -->
    <svg aria-hidden="true" width="24" height="24"
         viewBox="0 0 24 24" fill="currentColor">
      <path d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94…"/>
    </svg>
  </g>
</svg>

Here fill="currentColor" applies the brand "accent" color #eb6c36 throughout the logo's solid shapes.

Key Implementation Files

Three files govern icon behavior in the repository:

• skills/diagram-design/references/primitive-icons.md — The authoritative catalog of all 55 icons, their provenance attribution, and complete SVG snippets demonstrating currentColor usage.

• skills/diagram-design/references/style-guide.md — Defines the color token system (paper, ink, accent, etc.) that provides values for currentColor inheritance.

• skills/diagram-design/SKILL.md — Establishes architectural context for the icon primitive within architecture and sequence diagram generation.

Summary

• 55 monochrome icons sourced from Tabler Icons (stroked, MIT) and Simple Icons (filled, CC0)
• Uniform 24 × 24 px sizing enables consistent diagram composition
• currentColor inheritance eliminates hardcoded colors and enables theme switching
• Zero modification required between light, dark, or custom editorial variants
• Token-driven styling through skills/diagram-design/references/style-guide.md color definitions

Frequently Asked Questions

What is the exact size of Diagram Design icons?

Every icon uses a 24 × 24 px viewBox. This standardization ensures alignment when mixing Tabler Icons and Simple Icons in the same diagram composition, and supports clean scaling through the transform attribute without pixel distortion.

Can I use custom colors with Diagram Design icons?

Yes. Because icons use currentColor, any valid CSS color applied to an ancestor element propagates automatically. This includes hex values, CSS variables from style-guide.md tokens, or dynamic theme switching through class changes on container elements.

Why do some icons use stroke and others use fill?

The differentiation follows the source collection conventions. Tabler Icons are designed as outlined symbols for UI contexts, using stroke="currentColor" for their 1.5 px hairlines. Simple Icons are logo marks optimized for solid presentation, using fill="currentColor" for shape interiors. Both achieve identical color inheritance behavior through different SVG rendering paths.

Where is the complete icon list documented?

The definitive reference is skills/diagram-design/references/primitive-icons.md. This file enumerates all 55 icons, their source attribution, and includes working SVG fragments demonstrating proper currentColor implementation for each icon type.

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