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

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

Practical Code Examples for Icon Primitive Usage

Inline SVG in Mermaid Flowcharts

```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	Canonical storage for all normalized SVG snippets with Tabler attribution
scripts/build-icons.py	Build automation for fetching, normalizing, and updating icon assets
skills/diagram-design/assets/icons.html	Visual gallery with licensing documentation
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 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 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 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 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 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.

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