Vendor Icons

Shumoku hosts 900+ vendor icons on a CDN. Set the icon: field on a node or subgraph to a URL and it will be rendered with that icon.

Vendor	Icon Count	Format	Use Cases
Yamaha	103	PNG	Routers, switches, APs, VoIP
Aruba	55	SVG	Switches, APs, controllers
AWS	477	SVG	Cloud services
Juniper	343	PNG	Routers, switches, firewalls

Usage

Point icon: at an icon URL. The URL pattern is https://icons.shumoku.packof.me/v1/{vendor}/{name}.{ext} (.png for Yamaha / Juniper, .svg for Aruba / AWS).

nodes:
  - id: router-1
    label: "RTX3510"
    type: router
    vendor: yamaha
    model: rtx3510
    icon: https://icons.shumoku.packof.me/v1/yamaha/rtx3510.png

icon — decides the rendered icon. Besides CDN URLs, any image URL or inline SVG works
type — affects the fallback icon (a generic device-type icon used when icon is absent) and the node shape
vendor / model / service — kept as metadata, surfaced as data-* attributes in SVG output and in tooltips (they do not auto-resolve icons)

Icon dimensions are resolved automatically by the render pipeline (prepareRender) and drawn with the correct aspect ratio. No manual configuration needed.

Cloud icons

Cloud services like AWS use the same pattern:

nodes:
  - id: instance-1
    label: "Web Server"
    vendor: aws
    service: ec2
    icon: https://icons.shumoku.packof.me/v1/aws/ec2-instance.svg

Icons on subgraphs

Subgraphs accept icon: too — handy for VPCs and regions.

subgraphs:
  - id: vpc
    label: "Production VPC"
    vendor: aws
    service: vpc
    icon: https://icons.shumoku.packof.me/v1/aws/vpc-virtual-private-cloud.svg
    style:
      fill: "#FFF8E1"
      stroke: "#FF8F00"

Full example

name: "Hybrid Network"

subgraphs:
  - id: aws
    label: "AWS Tokyo"
    icon: https://icons.shumoku.packof.me/v1/aws/vpc-virtual-private-cloud.svg
    style:
      fill: "#fff8e1"

  - id: onprem
    label: "On-Premises"
    style:
      fill: "#e3f2fd"

nodes:
  # AWS
  - id: alb
    label: "ALB"
    icon: https://icons.shumoku.packof.me/v1/aws/elasticloadbalancing-application-load-balancer.svg
    parent: aws

  - id: ec2-1
    label: "Web Server"
    icon: https://icons.shumoku.packof.me/v1/aws/ec2-instance.svg
    parent: aws

  # On-Premises
  - id: router
    label: "RTX3510"
    type: router
    vendor: yamaha
    model: rtx3510
    icon: https://icons.shumoku.packof.me/v1/yamaha/rtx3510.png
    parent: onprem

  - id: switch
    label: "SWX3220"
    type: l3-switch
    vendor: yamaha
    model: swx3220-16mt
    icon: https://icons.shumoku.packof.me/v1/yamaha/swx3220-16mt.png
    parent: onprem

links:
  - from: alb
    to: ec2-1
  - from: router
    to: switch
    standard: 10GBASE-T
  # Site-to-Site VPN
  - from: router
    to: alb
    type: dashed
    label: "Site-to-Site VPN"

Icon list

Browse every icon below. The file name is the {name} part of the URL:

Loading icons...

Usage

Cloud icons

Icons on subgraphs

Full example

Icon list

On this page