# Icon Primitive Tabler Icons: How Diagram-Design Integrates SVG Icons for Diagrams

> Learn how diagram-design integrates Tabler Icons as SVG primitives, using currentColor for automatic color inheritance in any diagram renderer.

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

---

**The diagram-design repository treats icons as reusable SVG primitives built from the MIT-licensed Tabler Icons collection, normalizing them to use `currentColor` for automatic color inheritance across any diagram renderer.**

The `cathrynlavery/diagram-design` project provides a lightweight, portable icon system for technical diagrams. Rather than maintaining custom icon art, it sources from Tabler Icons—a popular open-source icon set—and transforms those SVGs into diagram-ready primitives that automatically adopt surrounding colors and styles.

## How the Icon Primitive Works with Tabler Icons

The integration follows a five-stage pipeline that starts with raw Tabler assets and ends with copy-paste-ready SVG snippets.

### Source Acquisition and Normalization

Raw SVG files are fetched from the public Tabler Icons repository. The [`scripts/build-icons.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-icons.py) script then processes each file to ensure consistency:

- **Style stripping**: Removes all `<style>` blocks to prevent CSS conflicts
- **Color rewriting**: Converts static `fill` and `stroke` values to `currentColor`
- **View-box enforcement**: Standardizes dimensions to 24 × 24 pixels

This normalization guarantees that every icon inherits its color from the parent diagram element rather than carrying hardcoded palette values.

### Storage in the Reference File

Normalized SVG fragments live in [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md). Each entry contains:

- A fenced `<svg>` snippet ready for direct use
- Attribution metadata (e.g., "Source: Tabler Icons / `device-laptop` (MIT)")

This reference file serves as the single source of truth for all icon primitives in the project.

### Rendering with Automatic Color Inheritance

When a diagram consumer embeds an icon primitive, the `currentColor` mechanism ensures visual consistency. The icon adopts whatever color is defined on its parent `<g>` or `<svg>` element, eliminating manual color management across different diagram themes.

### Brand vs. Generic Icon Distinction

The primitive system maintains two visual categories:

- **Generic IT/cloud icons**: Use **stroked** rendering (1.5px hairline) with `stroke="currentColor"` and `fill="none"`
- **Brand icons** (Docker, AWS, GitHub, etc.): Use **filled silhouettes** with `fill="currentColor"` and `stroke="none"`

This distinction is preserved consistently across the entire library and enforced during the build process.

### Regeneration Workflow

When new icons are needed, running `python scripts/build-icons.py` pulls the latest Tabler assets, renormalizes them, and updates [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) automatically.

## Practical Code Examples for Icon Primitive Usage

### Inline SVG in Mermaid Flowcharts

```markdown

```mermaid
flowchart LR
    A[Start] --> B[<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"/></svg>]
    B --> C[End]

```

```

The laptop icon snippet (from [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md)) embeds directly into the node label. The `currentColor` stroke inherits the diagram's default node styling.

### Brand Silhouette Integration (Docker)

```markdown

```mermaid
graph TD
    D[<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"
           fill="currentColor" stroke="none"><path d="…Docker shape…"/></svg>]
    D --> E[Service]

```

```

Brand icons leverage `fill="currentColor"` for solid silhouette rendering, matching the visual treatment in [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md).

### Programmatic Scaling with Group Transforms

```xml
<g transform="translate(100,50) scale(2)">
    <!-- laptop icon -->
    <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>

```

Wrapping the icon primitive in a `<g>` element enables translation and scaling without modifying the underlying SVG structure. Color inheritance remains intact through the transform hierarchy.

## Key Files in the Icon Primitive System

| File | Purpose |
|:---|:---|
| [`skills/diagram-design/references/primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-icons.md) | Canonical storage for all normalized SVG snippets with Tabler attribution |
| [`scripts/build-icons.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-icons.py) | Build automation for fetching, normalizing, and updating icon assets |
| [`skills/diagram-design/assets/icons.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/icons.html) | Visual gallery with licensing documentation |
| [`README.md`](https://github.com/cathrynlavery/diagram-design/blob/main/README.md) | Project-level description of the icon system and regeneration instructions |

## Summary

- Icon primitives in diagram-design are normalized Tabler Icons SVGs that use `currentColor` for automatic theme compatibility
- The [`build-icons.py`](https://github.com/cathrynlavery/diagram-design/blob/main/build-icons.py) script enforces consistent 24×24 sizing, removes conflicting styles, and rewrites color attributes
- Two rendering modes exist: **stroked** for generic icons and **filled** for brand silhouettes
- All icon primitives are stored in [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) with full attribution to original Tabler sources
- The system supports any diagram renderer that accepts inline SVG, including Mermaid and Draw.io

## Frequently Asked Questions

### What makes diagram-design's icon primitives different from using Tabler Icons directly?

The primitives are pre-processed for diagram-specific requirements. The [`build-icons.py`](https://github.com/cathrynlavery/diagram-design/blob/main/build-icons.py) script strips `<style>` blocks that can interfere with diagram renderers, enforces uniform sizing, and standardizes on `currentColor` so icons automatically match any diagram theme without manual color updates.

### Can I use these icon primitives outside of Mermaid diagrams?

Yes. The normalized SVG snippets in [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) are renderer-agnostic. They work in any environment that accepts inline SVG: Draw.io, Figma, SVG editors, web applications, or documentation generators. The `currentColor` approach ensures compatibility with CSS-styled containers.

### How do I add new icons from Tabler Icons to the repository?

Run `python scripts/build-icons.py` from the repository root. This fetches the latest Tabler Icons release, normalizes any new assets, and updates [`primitive-icons.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-icons.md) with the latest snippets and attribution. No manual SVG editing is required.

### Why do brand icons use fill while generic icons use stroke?

This distinction maintains visual hierarchy and recognizability. Brand logos (Docker whale, AWS smile, GitHub Octocat) are designed as solid silhouettes for instant identification. Generic technology icons (servers, databases, networks) use stroke rendering to appear lighter and more schematic within architectural diagrams.