# Diagram Design Icon Set Composition and currentColor Inheritance Explained

> Explore the cathrynlavery/diagram-design icon set, a monochrome library of 55 icons from Tabler and Simple Icons. Understand how currentColor inheritance enables seamless color adaptation.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: deep-dive
- Published: 2026-09-05

---

**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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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:

```html
<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:

```html
<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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.