Gentleface › Connectivity › topology-star

topology-star icon

Topology star: star topology, hub and spoke. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.707 3.707C8.512 3.902 8.276 4 8 4L8 6C8.276 6 8.512 6.098 8.707 6.293C8.902 6.488 9 6.724 9 7L11 7C11 6.724 11.098 6.488 11.293 6.293C11.488 6.098 11.724 6 12 6L13 6C13.276 6 13.512 6.098 13.707 6.293C13.902 6.488 14 6.724 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L12 9C11.724 9 11.488 8.902 11.293 8.707C11.098 8.512 11 8.276 11 8L9 8C9 8.276 8.902 8.512 8.707 8.707C8.512 8.902 8.276 9 8 9L8 11C8.276 11 8.512 11.098 8.707 11.293C8.902 11.488 9 11.724 9 12L9 13C9 13.276 8.902 13.512 8.707 13.707C8.512 13.902 8.276 14 8 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 12C6 11.724 6.098 11.488 6.293 11.293C6.488 11.098 6.724 11 7 11L7 9C6.724 9 6.488 8.902 6.293 8.707C6.098 8.512 6 8.276 6 8L4 8C4 8.276 3.902 8.512 3.707 8.707C3.512 8.902 3.276 9 3 9L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6C3.276 6 3.512 6.098 3.707 6.293C3.902 6.488 4 6.724 4 7L6 7C6 6.724 6.098 6.488 6.293 6.293C6.488 6.098 6.724 6 7 6L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L8 1C8.276 1 8.512 1.098 8.707 1.293C8.902 1.488 9 1.724 9 2L9 3C9 3.276 8.902 3.512 8.707 3.707Z"/></svg>

React

// Gentleface "topology-star" (line-round), MIT. https://gentleface.com/icons/topology-star
import type { SVGProps } from 'react';

export function TopologyStarIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.707 3.707C8.512 3.902 8.276 4 8 4L8 6C8.276 6 8.512 6.098 8.707 6.293C8.902 6.488 9 6.724 9 7L11 7C11 6.724 11.098 6.488 11.293 6.293C11.488 6.098 11.724 6 12 6L13 6C13.276 6 13.512 6.098 13.707 6.293C13.902 6.488 14 6.724 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L12 9C11.724 9 11.488 8.902 11.293 8.707C11.098 8.512 11 8.276 11 8L9 8C9 8.276 8.902 8.512 8.707 8.707C8.512 8.902 8.276 9 8 9L8 11C8.276 11 8.512 11.098 8.707 11.293C8.902 11.488 9 11.724 9 12L9 13C9 13.276 8.902 13.512 8.707 13.707C8.512 13.902 8.276 14 8 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 12C6 11.724 6.098 11.488 6.293 11.293C6.488 11.098 6.724 11 7 11L7 9C6.724 9 6.488 8.902 6.293 8.707C6.098 8.512 6 8.276 6 8L4 8C4 8.276 3.902 8.512 3.707 8.707C3.512 8.902 3.276 9 3 9L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6C3.276 6 3.512 6.098 3.707 6.293C3.902 6.488 4 6.724 4 7L6 7C6 6.724 6.098 6.488 6.293 6.293C6.488 6.098 6.724 6 7 6L7 4C6.724 4 6.488 3.902 6.293 3.707C6.098 3.512 6 3.276 6 3L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L8 1C8.276 1 8.512 1.098 8.707 1.293C8.902 1.488 9 1.724 9 2L9 3C9 3.276 8.902 3.512 8.707 3.707Z" />
    </svg>
  );
}

Vue

Vue: see /icons/topology-star.md

Svelte

Svelte: see /icons/topology-star.md

HTML img

HTML img: see /icons/topology-star.md

CSS

CSS: see /icons/topology-star.md

Data URL

Data URL: see /icons/topology-star.md

Sprite

Sprite: see /icons/topology-star.md

SwiftUI

SwiftUI: see /icons/topology-star.md

Compose

Compose: see /icons/topology-star.md

Android XML

Android XML: see /icons/topology-star.md

Flutter

Flutter: see /icons/topology-star.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

star topology, hub and spoke

Tags

topology, star, hub, spoke, hub-and-spoke, network, nodes, vpn, sd-wan

Category

Connectivity

Component name

TopologyStarIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

Family 5

network network-off topology-bus topology-mesh topology-ring

More connectivity icons

antenna antenna-off bluetooth bluetooth-connected bluetooth-gear bluetooth-off bluetooth-searching bluetooth-x cast cast-alert cast-connected cast-gear cast-off cast-pause cast-plus cast-search · all connectivity icons

For agents

Metadata: /icons/topology-star.json · Markdown: /icons/topology-star.md · SVG: https://gentleface.com/svg/{style}/16/topology-star.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/topology-star.png

topology-star icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp