Adding an icon pack

Drop in your own SVGs — directory layout, manifest generation, naming, and licensing rules.

Packs are drop-in. Every directory under icon-packs/ containing a manifest.json is discovered automatically — no registration step.

This is how you add your company's own device artwork, or a vendor library you converted yourself.

Lay out the SVGs

icon-packs/
└─ acme/
   └─ svg/
      ├─ Routers/
      │  ├─ edge-router.svg
      │  └─ branch-router.svg
      ├─ Switches/
      │  ├─ core-switch.svg
      │  └─ access-switch.svg
      └─ Security/
         └─ perimeter-firewall.svg

The directory under svg/ becomes the category; the filename becomes the name and the search keywords.

Generate the manifest

node packages/icons/dist/generate-cli.js icon-packs/acme acme Acme
# → wrote 5 icons to icon-packs/acme/manifest.json

Arguments are <packDir> <packName> <title> [svgSubdir]. The subdirectory defaults to svg.

The generated manifest looks like:

icon-packs/acme/manifest.json
{
  "pack": "acme",
  "title": "Acme",
  "version": "1.0.0",
  "icons": [
    {
      "id": "acme/routers/edge-router",
      "title": "Edge Router",
      "category": "routers",
      "keywords": ["edge", "router", "routers"],
      "file": "svg/Routers/edge-router.svg"
    }
  ]
}

Wire it into the regeneration script

Add the pack to gen:icons in the root package.json so it's rebuilt with the others:

"gen:icons": "node packages/icons/dist/generate-cli.js icon-packs/cisco cisco Cisco && ... && node packages/icons/dist/generate-cli.js icon-packs/acme acme Acme"

Then:

npm run gen:icons

Verify

npm run marrow -- icons packs
npm run marrow -- icons search "edge router"
# acme/routers/edge-router  —  Edge Router (routers)

Use the id in a topology and validate.

Writing SVGs that behave

  • Use fill="currentColor" where you want the shape to follow the theme. Hard-coded colors stay fixed in both light and dark, which is right for a logo and wrong for a device glyph.
  • Keep a square-ish viewBox. Icons are drawn into a chip; extreme aspect ratios get letterboxed.
  • No embedded raster, no external references. Anything pointing outside the document breaks the offline guarantee and is stripped.
  • Strip editor metadata. Illustrator and Figma exports carry a lot of dead weight; every byte is inlined into every diagram that uses the icon.

Licensing

If you're contributing a pack upstream rather than keeping it local, it must be under a permissive or attributed license, with the attribution recorded in icon-packs/LICENSES.md. Private packs in your own fork are your call.

Converting vendor stencils

Juniper and Fortinet publish Visio stencils (.vss, .vssx) only. draw.io reads them: import the stencil, then export as SVG. The result needs the cleanup above — the exports are verbose and often carry hard-coded colors.

Palo Alto has no public icon library.

Edit this page
Testing
The suite, the fixture corpus, and how visual changes are verified.
Decisions
Architecture decision records — the load-bearing choices behind Marrow's shape, and why they were made.