diff --git a/CONTEXT.md b/CONTEXT.md
index 9d42611ef..f77a4ee0a 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -54,11 +54,11 @@ The classification of a Vertex Type's configured icon into what it takes to rend
 _Avoid_: Icon type (ambiguous with `iconImageType`, the stored MIME string)
 
 **Icon Registry**:
-The single store of resolved icons, keyed by Icon Source Id and shared by every Icon Surface. Holds a color-free artifact — a sanitized SVG string or a raster url — so applying a Vertex Type's color stays a pure transform at the point of use. A plain external store outside React/Jotai, bridged by `useSyncExternalStore`; explicitly **not** TanStack Query, because a per-hook subscription scaled with Vertex Type count and locked up the Schema View at 10k. Resolves a raster url synchronously, allows a failed icon three attempts in total, and never stores a failure as a result. See `docs/adr/20260813-icon-registry-not-react-query.md`.
+The single store of resolved icons, keyed by Icon Source Id and shared by every Icon Surface. Holds a color-free artifact — a sanitized SVG string or a raster url — so applying a Vertex Type's color stays a pure transform at the point of use. Every stored SVG is guaranteed to carry a `viewBox`, synthesized from `width`/`height` when the source omits one, because the surfaces fit icons by `preserveAspectRatio` and an SVG with no `viewBox` has no ratio to fit (issue #2108). A plain external store outside React/Jotai, bridged by `useSyncExternalStore`; explicitly **not** TanStack Query, because a per-hook subscription scaled with Vertex Type count and locked up the Schema View at 10k. Resolves a raster url synchronously, allows a failed icon three attempts in total, and never stores a failure as a result. See `docs/adr/20260813-icon-registry-not-react-query.md`.
 _Avoid_: Icon cache (it is the source of truth for resolution, not a layer in front of one)
 
 **Icon Surface**:
-One of the three places an icon is drawn, which differ in how color is applied and how much they trust the markup. The **canvas** (`useBackgroundImageMap` → cytoscape `background-image`) and the **sandboxed DOM** (`VertexSymbolIcon` → `<image href>`) both render the icon as a separate image document, so CSS cannot reach it: an SVG is passed as a `data:` uri with the color baked into the markup, a raster as its plain url. **Inline DOM** (`VertexIcon`, and the lucide branch of `VertexSymbolIcon`) renders live elements that inherit `color` through `currentColor`, making recolor free. Only trusted lucide geometry is inlined by `VertexSymbolIcon`; `VertexIcon` also inlines sanitized user SVG, which predates that rule and is the known outlier.
+One of the three places an icon is drawn, which differ in how color is applied and how much they trust the markup. The **canvas** (`useBackgroundImageMap` → cytoscape `background-image`) and the **sandboxed DOM** (`VertexSymbolIcon` → `<image href>`) both render the icon as a separate image document, so CSS cannot reach it: an SVG is passed as a `data:` uri with the color baked into the markup, a raster as its plain url — `VertexSymbolIcon` places either directly. Both surfaces inset the icon to 60% of the node and fit it with `preserveAspectRatio`, but only `VertexSymbolIcon` can do so directly, in its own SVG coordinates; cytoscape cannot both preserve a ratio and inset, so the canvas instead wraps whatever `toIconImageUrl` returned — the plain raster url included — in its own padded square SVG and lets the nested `<image>` fit itself (issue #2108). That wrapper is applied on the canvas path alone — adding it inside `toIconImageUrl` would inset twice on the DOM side. **Inline DOM** (`VertexIcon`, and the lucide branch of `VertexSymbolIcon`) renders live elements that inherit `color` through `currentColor`, making recolor free. Only trusted lucide geometry is inlined by `VertexSymbolIcon`; `VertexIcon` also inlines sanitized user SVG, which predates that rule and is the known outlier.
 _Avoid_: Icon renderer (three similarly-named components — `VertexIcon`, `VertexSymbol`, `VertexSymbolIcon` — differ by surface, so name the surface)
 
 **Neighbors**:
diff --git a/docs/adr/20260813-icon-registry-not-react-query.md b/docs/adr/20260813-icon-registry-not-react-query.md
index 67bdb8a11..89c827c58 100644
--- a/docs/adr/20260813-icon-registry-not-react-query.md
+++ b/docs/adr/20260813-icon-registry-not-react-query.md
@@ -31,18 +31,20 @@ Separately, the DOM surface paid for a workaround it did not need. `VertexSymbol
 
 **2. Icons render per kind, on the surface's own terms.**
 
-| kind     | canvas         | DOM                                        |
-| -------- | -------------- | ------------------------------------------ |
-| Lucide   | baked data uri | `<DynamicIcon>`, live DOM, color inherited |
-| user SVG | baked data uri | `<image href="data:…">`, color baked       |
-| raster   | url            | `<image href>`                             |
+| kind     | canvas                                 | DOM                                        |
+| -------- | -------------------------------------- | ------------------------------------------ |
+| Lucide   | baked data uri, wrapped for aspect fit | `<DynamicIcon>`, live DOM, color inherited |
+| user SVG | baked data uri, wrapped for aspect fit | `<image href="data:…">`, color baked       |
+| raster   | plain url, wrapped for aspect fit      | `<image href>`                             |
 
 Lucide markup is trusted bundled geometry with no ids, defs, or script, so inlining it costs nothing and recoloring becomes synchronous.
 
-Untrusted SVG is deliberately **not** inlined on these surfaces. `<image href="data:…">` renders it as a script-disabled image document (W3C SVG Integration §3.4/§3.6 — an image context disables both script execution and external references). Inlining would trade that browser-enforced boundary for DOMPurify alone, and add id collisions with the `useId()`-generated `clipPath` ids and unsanitized `<style>` blocks. DOMPurify stays; the sandbox stays with it. The cost is that hardcoded fills in custom SVG still do not follow the vertex color (#2105, pre-existing).
+Untrusted SVG is deliberately **not** inlined on these surfaces. `<image href="data:…">` renders it as a script-disabled image document (W3C SVG Integration §3.4/§3.6 — an image context disables both script execution and external references not embedded in the `data:` uri itself). Inlining would trade that browser-enforced boundary for DOMPurify alone, and add id collisions with the `useId()`-generated `clipPath` ids and unsanitized `<style>` blocks. DOMPurify stays; the sandbox stays with it. The cost is that hardcoded fills in custom SVG still do not follow the vertex color (#2105, pre-existing).
 
 This is not codebase-wide: `components/VertexIcon.tsx` inlines sanitized user SVG into the live DOM via `react-inlinesvg`, with no sandbox. It predates this decision and is the outlier, not the pattern to copy.
 
+**Canvas sizing (issue #2108, PR #2142).** Cytoscape cannot both preserve an icon's aspect ratio and inset it to 60% of the node: `background-fit: contain` keeps the ratio but fills the whole node, and the node is an ellipse, so a square-ish icon's corners spill past the shape. The canvas wraps every kind's icon url in its own padded square SVG and lets a nested `<image preserveAspectRatio>` do the fitting — the same mechanism `VertexSymbolIcon` already uses directly. That wrapper is itself a `data:` uri, so it stays within the image-document sandbox above: nesting one `data:`-uri image inside another issues no external request either.
+
 **3. `clip-path` goes on an ancestor `<g>`, never on the nested `<svg>`.**
 
 Chrome renders **nothing** when `clip-path` sits directly on a nested `<svg>`, and nothing about layout or color reveals the fault — the path still reports a correct bounding box and inherited stroke. Since only real pixels expose it, `VertexSymbol.test.tsx` guards the structure instead. The failure mode is a silently invisible icon.
diff --git a/packages/graph-explorer/src/components/Graph/styles/defaultNodeStyle.ts b/packages/graph-explorer/src/components/Graph/styles/defaultNodeStyle.ts
index c7527f98e..18e584ec6 100644
--- a/packages/graph-explorer/src/components/Graph/styles/defaultNodeStyle.ts
+++ b/packages/graph-explorer/src/components/Graph/styles/defaultNodeStyle.ts
@@ -4,9 +4,15 @@ const defaultNodeStyle: RenderedNodeStyle = {
   background: "#128EE5",
   backgroundOpacity: 0.4,
   borderColor: "#128EE5",
-  backgroundFit: "none",
-  backgroundWidth: "60%",
-  backgroundHeight: "60%",
+  // The icon image is a square wrapper that already insets the artwork
+  // (issue #2108), so the node only has to fit that square without
+  // distorting it: `contain` is what does that — `auto`/`auto` are
+  // cytoscape's own defaults, restated for intent. `contain` alone, without
+  // the wrapper, is not enough: it fits the whole square node box, and the
+  // node is an ellipse, so a square-ish icon's corners spill past the shape.
+  backgroundFit: "contain",
+  backgroundWidth: "auto",
+  backgroundHeight: "auto",
   borderWidth: 1,
   borderStyle: "solid",
   borderOpacity: 0,
diff --git a/packages/graph-explorer/src/components/VertexIcon.test.tsx b/packages/graph-explorer/src/components/VertexIcon.test.tsx
new file mode 100644
index 000000000..d1b0c8ee4
--- /dev/null
+++ b/packages/graph-explorer/src/components/VertexIcon.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { render, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  appDefaultVertexStyle,
+  createVertexType,
+  type VertexStyle,
+} from "@/core";
+
+import VertexIcon from "./VertexIcon";
+
+function renderIcon(overrides: Partial<VertexStyle>) {
+  const vertexStyle: VertexStyle = {
+    ...appDefaultVertexStyle,
+    type: createVertexType("Person"),
+    ...overrides,
+  };
+  return render(<VertexIcon vertexStyle={vertexStyle} />).container;
+}
+
+describe("VertexIcon", () => {
+  // The one thing this branch changed here (issue #2108): without
+  // object-contain, object-fit's default is `fill`, which stretches a
+  // non-square raster to the fixed size-6 box instead of scaling it.
+  it("renders a raster icon with object-contain so it scales instead of stretching", () => {
+    const container = renderIcon({
+      iconUrl: "https://example.test/wide.png",
+      iconImageType: "image/png",
+    });
+
+    const img = container.querySelector("img");
+    expect(img).toBeTruthy();
+    expect(img!.className).toContain("object-contain");
+    expect(img!.getAttribute("src")).toBe("https://example.test/wide.png");
+  });
+
+  it("renders a lucide icon inline so it inherits the vertex color", async () => {
+    const container = renderIcon({
+      iconUrl: "lucide:plane",
+      iconImageType: "image/svg+xml",
+      color: "#FF0000",
+    });
+
+    await waitFor(() => expect(container.querySelector("svg")).toBeTruthy());
+    const icon = container.querySelector("svg");
+    expect(icon).toBeTruthy();
+    expect((icon as SVGElement).style.color).toBe("rgb(255, 0, 0)");
+    // Live DOM, not an <img>/<image> — this is the inline-DOM surface.
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("renders nothing for an unknown lucide reference", () => {
+    const container = renderIcon({
+      iconUrl: "lucide:not-a-real-icon-name-xyz",
+      iconImageType: "image/svg+xml",
+    });
+
+    expect(container.querySelector("svg")).toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+  });
+});
diff --git a/packages/graph-explorer/src/components/VertexIcon.tsx b/packages/graph-explorer/src/components/VertexIcon.tsx
index bea91d8a2..2005d193e 100644
--- a/packages/graph-explorer/src/components/VertexIcon.tsx
+++ b/packages/graph-explorer/src/components/VertexIcon.tsx
@@ -3,13 +3,15 @@ import { DynamicIcon } from "lucide-react/dynamic";
 import SVG from "react-inlinesvg";
 
 import { useVertexStyle, type VertexStyle, type VertexType } from "@/core";
+import { ensureSvgViewBox } from "@/core/icons";
 import { cn } from "@/utils";
 import { getLucideName, isValidLucideIconName } from "@/utils/lucideIcons";
 
 function sanitizeSvg(svg: string): string {
-  return DOMPurify.sanitize(svg, {
+  const sanitized = DOMPurify.sanitize(svg, {
     USE_PROFILES: { svg: true, svgFilters: true },
   });
+  return ensureSvgViewBox(sanitized);
 }
 
 interface Props {
@@ -54,7 +56,7 @@ function VertexIcon({ vertexStyle, className, alt }: Props) {
     <img
       src={vertexStyle.iconUrl}
       alt={altText}
-      className={cn("size-6 shrink-0", className)}
+      className={cn("size-6 shrink-0 object-contain", className)}
       style={{ color: vertexStyle.color }}
     />
   );
diff --git a/packages/graph-explorer/src/components/VertexSymbol/VertexSymbol.tsx b/packages/graph-explorer/src/components/VertexSymbol/VertexSymbol.tsx
index 02f4c87bb..c7f2ac04f 100644
--- a/packages/graph-explorer/src/components/VertexSymbol/VertexSymbol.tsx
+++ b/packages/graph-explorer/src/components/VertexSymbol/VertexSymbol.tsx
@@ -1,21 +1,20 @@
 import { useId } from "react";
 
 import { useVertexStyle, type VertexStyle, type VertexType } from "@/core";
+import { ICON_BOX, ICON_RATIO } from "@/core/icons/iconGeometry";
 import { cn } from "@/utils";
 
 import { resolveShapeGeometry } from "./nodeShapes";
 import { VertexSymbolIcon } from "./VertexSymbolIcon";
 
-const VIEWBOX = 96;
-const ICON_RATIO = 0.6;
 const CANVAS_NODE_SIZE = 24;
 /**
  * How much larger the preview draws things than the graph canvas: the ratio of
- * the SVG viewBox (96) to a canvas node's size in cytoscape units (24). Applied
- * to any canvas-unit length (border width, label font/padding) to render it at
- * preview size.
+ * the SVG viewBox ({@link ICON_BOX}) to a canvas node's size in cytoscape units
+ * (24). Applied to any canvas-unit length (border width, label font/padding)
+ * to render it at preview size.
  */
-export const PREVIEW_SCALE = VIEWBOX / CANVAS_NODE_SIZE;
+export const PREVIEW_SCALE = ICON_BOX / CANVAS_NODE_SIZE;
 
 interface Props {
   vertexStyle: VertexStyle;
@@ -26,11 +25,11 @@ export function VertexSymbol({ vertexStyle, className }: Props) {
   // SVG url(#...) references reject the colons in React's raw useId format.
   const clipId = `vs-${useId().replace(/:/g, "")}`;
   const strokeWidth = vertexStyle.borderWidth * PREVIEW_SCALE;
-  const insetSize = Math.max(1, VIEWBOX - strokeWidth * 2);
+  const insetSize = Math.max(1, ICON_BOX - strokeWidth * 2);
   const geometry = resolveShapeGeometry(vertexStyle.shape, insetSize);
 
-  const iconSize = VIEWBOX * ICON_RATIO;
-  const iconOffset = (VIEWBOX - iconSize) / 2;
+  const iconSize = ICON_BOX * ICON_RATIO;
+  const iconOffset = (ICON_BOX - iconSize) / 2;
 
   // The shape is rendered twice: once filled/stroked, once as the icon's
   // clipPath. clipPath children must be shape elements directly — a wrapping
@@ -41,7 +40,7 @@ export function VertexSymbol({ vertexStyle, className }: Props) {
 
   return (
     <svg
-      viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
+      viewBox={`0 0 ${ICON_BOX} ${ICON_BOX}`}
       className={cn("size-9 shrink-0", className)}
       // An inline SVG is required for the clipPath and nested icon.
       // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
diff --git a/packages/graph-explorer/src/core/icons/iconGeometry.test.ts b/packages/graph-explorer/src/core/icons/iconGeometry.test.ts
new file mode 100644
index 000000000..c4c5b6b9a
--- /dev/null
+++ b/packages/graph-explorer/src/core/icons/iconGeometry.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+
+import { encodeSvg, ICON_BOX, ICON_RATIO } from "./iconGeometry";
+
+describe("iconGeometry", () => {
+  // ICON_BOX and ICON_RATIO are the single source of truth for how much of the
+  // icon's square box the artwork occupies. The canvas (useBackgroundImageMap)
+  // and the style preview (VertexSymbol) both import them rather than
+  // declaring their own copy — this pins the values themselves, so a future
+  // edit to one file cannot silently drift from the other without also
+  // changing this test.
+  it("insets the icon to 60% of a box that is 4x a canvas node (24 units)", () => {
+    expect(ICON_RATIO).toBe(0.6);
+    expect(ICON_BOX).toBe(96);
+    expect(ICON_BOX / 24).toBe(4);
+  });
+
+  it("percent-encodes svg markup as a data uri", () => {
+    expect(encodeSvg("<svg>&</svg>")).toBe(
+      "data:image/svg+xml;utf8," + encodeURIComponent("<svg>&</svg>"),
+    );
+  });
+});
diff --git a/packages/graph-explorer/src/core/icons/iconGeometry.ts b/packages/graph-explorer/src/core/icons/iconGeometry.ts
new file mode 100644
index 000000000..2d8797503
--- /dev/null
+++ b/packages/graph-explorer/src/core/icons/iconGeometry.ts
@@ -0,0 +1,19 @@
+/**
+ * Shared inset geometry for every icon surface. The canvas
+ * (`useBackgroundImageMap`) and the style preview (`VertexSymbol`) each fit an
+ * icon into a square box by `preserveAspectRatio`, and both must agree on how
+ * much of that box the icon occupies — changing one without the other would
+ * silently desync what the preview shows from what the canvas renders.
+ *
+ * {@link ICON_BOX} is not arbitrary: it is exactly 4x a canvas node's size in
+ * cytoscape units (24), the same ratio `VertexSymbol`'s own viewBox already
+ * uses for everything else it scales (border width, label font/padding).
+ */
+export const ICON_BOX = 96;
+
+/** Fraction of {@link ICON_BOX} the icon occupies, leaving room for the shape's curve. */
+export const ICON_RATIO = 0.6;
+
+export function encodeSvg(svgContent: string): string {
+  return "data:image/svg+xml;utf8," + encodeURIComponent(svgContent);
+}
diff --git a/packages/graph-explorer/src/core/icons/iconImageUrl.test.ts b/packages/graph-explorer/src/core/icons/iconImageUrl.test.ts
index 632ae8792..864f80dbb 100644
--- a/packages/graph-explorer/src/core/icons/iconImageUrl.test.ts
+++ b/packages/graph-explorer/src/core/icons/iconImageUrl.test.ts
@@ -29,11 +29,14 @@ describe("toIconImageUrl", () => {
     expect(decode(result)).toContain("<path");
   });
 
-  it("sizes the svg to the cytoscape node size", () => {
+  // Sizing belongs to the consumer, which fits the icon by `preserveAspectRatio`
+  // against its own `viewBox`. Overriding the intrinsic size here would fight
+  // that, and forcing a square would reintroduce issue #2108.
+  it("leaves the svg's own size and viewBox alone", () => {
     const result = toIconImageUrl({ kind: "svg", svg: SVG }, "#FF0000");
 
-    expect(decode(result)).toContain('width="24"');
-    expect(decode(result)).toContain('height="24"');
+    expect(decode(result)).toContain('viewBox="0 0 24 24"');
+    expect(decode(result)).not.toContain('width="24"');
   });
 
   // The color reaches a currentColor-authored icon through CSS inheritance, so
@@ -103,4 +106,22 @@ describe("toIconImageUrl", () => {
 
     expect(red).not.toBe(blue);
   });
+
+  // Issue #2108: sizing is the consumer's job. Both consumers place the icon
+  // with `preserveAspectRatio`, which fits the icon against its own `viewBox`,
+  // so overriding its intrinsic size here would only fight that — and forcing
+  // a square would bake in the very distortion the issue is about.
+  describe("non-square icons (issue #2108)", () => {
+    const WIDE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"><rect width="400" height="100"/></svg>`;
+
+    it("leaves the icon's own geometry untouched", () => {
+      const result = decode(
+        toIconImageUrl({ kind: "svg", svg: WIDE_SVG }, "#FF0000"),
+      );
+
+      expect(result).toContain('viewBox="0 0 400 100"');
+      expect(result).not.toContain('width="24"');
+      expect(result).not.toContain('height="24"');
+    });
+  });
 });
diff --git a/packages/graph-explorer/src/core/icons/iconImageUrl.ts b/packages/graph-explorer/src/core/icons/iconImageUrl.ts
index 64e9f1d08..9aba4b5b9 100644
--- a/packages/graph-explorer/src/core/icons/iconImageUrl.ts
+++ b/packages/graph-explorer/src/core/icons/iconImageUrl.ts
@@ -1,7 +1,6 @@
 import type { ResolvedIcon } from "./iconRegistry";
 
-/** Intrinsic size; both consumers scale from it. Matches the cytoscape node size. */
-const ICON_SIZE = "24";
+import { encodeSvg } from "./iconGeometry";
 
 /**
  * Pure transform to an image url.
@@ -10,38 +9,38 @@ const ICON_SIZE = "24";
  * separate image document — the cytoscape `background-image`, and the `<image>`
  * element used for untrusted SVG — which CSS cannot reach. Icons rendered as
  * live DOM inherit `color` instead and never call this.
+ *
+ * No size is applied. Both consumers place the icon with
+ * `preserveAspectRatio`, which needs the icon's own `viewBox` to fit against;
+ * overriding its intrinsic size here would only fight that.
+ *
+ * Do not wrap the result in another inset SVG here: `VertexSymbolIcon` already
+ * insets to 60% in its own SVG coordinates, so this stays a single fit for
+ * every caller. Only the canvas path (`useBackgroundImageMap`) needs its own
+ * wrapper, because cytoscape — unlike an inline SVG — cannot fit an image by
+ * `preserveAspectRatio` itself.
  */
 export function toIconImageUrl(icon: ResolvedIcon, color: string): string {
   switch (icon.kind) {
     case "raster":
       return icon.url;
     case "svg":
-      return encodeSvg(applySizeAndColor(icon.svg, color));
+      return encodeSvg(applyColor(icon.svg, color));
   }
 }
 
-function applySizeAndColor(svgContent: string, color: string): string {
-  const doc = new DOMParser().parseFromString(svgContent, "application/xml");
-  const root = doc.documentElement;
-  root.setAttribute("width", ICON_SIZE);
-  root.setAttribute("height", ICON_SIZE);
-  applyColor(root, color);
-  return new XMLSerializer().serializeToString(root);
-}
-
 /**
  * Sets `color` on the root so `currentColor`-authored icons follow the vertex
  * color by inheritance; hardcoded fills are left untouched. Isolated here so
  * switching to "tint everything" stays a one-function change (issue #2105).
  */
-function applyColor(root: Element, color: string): void {
+function applyColor(svgContent: string, color: string): string {
+  const doc = new DOMParser().parseFromString(svgContent, "application/xml");
+  const root = doc.documentElement;
   const existing = root.getAttribute("style");
   root.setAttribute(
     "style",
     existing ? `${existing};color:${color}` : `color:${color}`,
   );
-}
-
-function encodeSvg(svgContent: string): string {
-  return "data:image/svg+xml;utf8," + encodeURIComponent(svgContent);
+  return new XMLSerializer().serializeToString(root);
 }
diff --git a/packages/graph-explorer/src/core/icons/iconRegistry.test.ts b/packages/graph-explorer/src/core/icons/iconRegistry.test.ts
index 644b85777..28dd9275b 100644
--- a/packages/graph-explorer/src/core/icons/iconRegistry.test.ts
+++ b/packages/graph-explorer/src/core/icons/iconRegistry.test.ts
@@ -291,6 +291,31 @@ describe("sanitizes a user-supplied svg before storing it", () => {
     return (resolved as { kind: "svg"; svg: string }).svg;
   }
 
+  // The svg profile already allowlists these, so no ALLOWED_ATTR override is
+  // needed to keep aspect ratio. An explicit list would also be a trap: it
+  // cannot take effect alongside USE_PROFILES (DOMPurify rebuilds ALLOWED_ATTR
+  // from the profile sets), so it reads as load-bearing while doing nothing,
+  // and any attribute it omitted would silently vanish if the profiles were
+  // ever dropped.
+  it("preserves the geometry and path attributes an icon needs to scale", async () => {
+    const svg = await resolveCustomSvg(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="401" height="102" viewBox="0 0 403 104" preserveAspectRatio="xMidYMid meet"><path d="M0 0h405v106H0z" stroke-width="7" transform="translate(9 9)"/><polyline points="1,1 11,11"/></svg>`,
+    );
+
+    // Distinct numbers per attribute, so a check can only pass if that
+    // specific attribute-value pair survived — unlike `toContain(name)`,
+    // which a substring of an unrelated attribute (`preserveAspectRatio`
+    // contains "d"; `stroke-width` contains "width") can satisfy for free.
+    expect(svg).toContain('width="401"');
+    expect(svg).toContain('height="102"');
+    expect(svg).toContain('viewBox="0 0 403 104"');
+    expect(svg).toContain('preserveAspectRatio="xMidYMid meet"');
+    expect(svg).toContain('d="M0 0h405v106H0z"');
+    expect(svg).toContain('stroke-width="7"');
+    expect(svg).toContain('transform="translate(9 9)"');
+    expect(svg).toContain('points="1,1 11,11"');
+  });
+
   it("strips a <script> element but keeps the rest of the drawing", async () => {
     const svg = await resolveCustomSvg(
       `<svg xmlns="http://www.w3.org/2000/svg"><script>alert(1)</script><rect width="5" height="5"/></svg>`,
diff --git a/packages/graph-explorer/src/core/icons/iconRegistry.ts b/packages/graph-explorer/src/core/icons/iconRegistry.ts
index e4ed001dc..f24c9cd0c 100644
--- a/packages/graph-explorer/src/core/icons/iconRegistry.ts
+++ b/packages/graph-explorer/src/core/icons/iconRegistry.ts
@@ -4,6 +4,7 @@ import { logger } from "@/utils";
 import { getLucideSvgString } from "@/utils/lucideIcons";
 
 import { type IconSource, type IconSourceId, iconSourceId } from "./iconSource";
+import { ensureSvgViewBox } from "./svgViewBox";
 
 /** An icon resolved to a renderable form, with no color applied yet. */
 export type ResolvedIcon =
@@ -142,22 +143,25 @@ async function resolveIconSource(
     case "raster":
       return { kind: "raster", url: source.url };
     case "lucide": {
-      const svg = await getLucideSvgString(source.name);
-      if (svg === null) {
+      const raw = await getLucideSvgString(source.name);
+      if (raw === null) {
         logger.warn("Unknown lucide icon", source.name);
         return null;
       }
-      return { kind: "svg", svg };
+      return { kind: "svg", svg: ensureSvgViewBox(raw) };
     }
     case "svg": {
       // Untrusted: a user-supplied SVG, sanitized before it is used anywhere.
       const response = await fetch(source.url);
-      const svg = DOMPurify.sanitize(await response.text(), {
+      const sanitized = DOMPurify.sanitize(await response.text(), {
         USE_PROFILES: { svg: true, svgFilters: true },
       });
       // A 404 body sanitizes to something that is not SVG. Reject it here so
       // consumers can treat `ResolvedIcon` as renderable.
-      return isParseableSvg(svg) ? { kind: "svg", svg } : null;
+      if (!isParseableSvg(sanitized)) {
+        return null;
+      }
+      return { kind: "svg", svg: ensureSvgViewBox(sanitized) };
     }
   }
 }
diff --git a/packages/graph-explorer/src/core/icons/iconSurfaces.test.tsx b/packages/graph-explorer/src/core/icons/iconSurfaces.test.tsx
index 4db651a74..49a49bdc5 100644
--- a/packages/graph-explorer/src/core/icons/iconSurfaces.test.tsx
+++ b/packages/graph-explorer/src/core/icons/iconSurfaces.test.tsx
@@ -73,4 +73,42 @@ describe("icon resolution across surfaces", () => {
     // One additional fetch for the new icon, not two for the whole set.
     expect(fetch).toBeCalledTimes(2);
   });
+
+  // Issue #2108: a non-square custom icon (a wide logo, say) must keep its
+  // aspect ratio on the canvas rather than being squashed into a square.
+  // The uploaded SVG has width/height but no viewBox — exactly what a plain
+  // `<svg width height>` export produces — and without a viewBox the wrapper's
+  // `preserveAspectRatio` has no ratio to fit and the icon fills the padded box
+  // square. So this covers viewBox synthesis end to end.
+  it("carries a synthesized viewBox through to the canvas image for a wide custom icon", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() =>
+        Promise.resolve(
+          new Response(
+            `<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="100"/></svg>`,
+          ),
+        ),
+      ),
+    );
+
+    const canvas = renderHook(() =>
+      useBackgroundImageMap([
+        style({
+          type: createVertexType("Wide"),
+          iconUrl: "https://example.test/wide-logo.svg",
+        }),
+      ]),
+    );
+    await waitFor(() => expect(canvas.result.current.size).toBe(1));
+
+    const url = canvas.result.current.get(createVertexType("Wide"))!;
+    // The wrapper nests the icon as its own data uri, hence the double decode.
+    expect(decodeURIComponent(decodeURIComponent(url))).toContain(
+      'viewBox="0 0 400 100"',
+    );
+    expect(decodeURIComponent(url)).toContain(
+      'preserveAspectRatio="xMidYMid meet"',
+    );
+  });
 });
diff --git a/packages/graph-explorer/src/core/icons/index.ts b/packages/graph-explorer/src/core/icons/index.ts
index 5308889c1..9b1024d54 100644
--- a/packages/graph-explorer/src/core/icons/index.ts
+++ b/packages/graph-explorer/src/core/icons/index.ts
@@ -1,4 +1,5 @@
 export * from "./iconImageUrl";
 export * from "./iconRegistry";
 export * from "./iconSource";
+export * from "./svgViewBox";
 export * from "./useResolvedIcons";
diff --git a/packages/graph-explorer/src/core/icons/svgViewBox.test.ts b/packages/graph-explorer/src/core/icons/svgViewBox.test.ts
new file mode 100644
index 000000000..6bb1618c8
--- /dev/null
+++ b/packages/graph-explorer/src/core/icons/svgViewBox.test.ts
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+// DEV NOTE: happy-dom's DOMParser is not reliable for the svg render path.
+
+import { describe, expect, it } from "vitest";
+
+import { ensureSvgViewBox } from "./svgViewBox";
+
+describe("ensureSvgViewBox", () => {
+  // Issue #2108: without a viewBox, an SVG has no coordinate system to scale
+  // from — forcing a different width/height on the root just clips the
+  // content instead of scaling it.
+  it("synthesizes a viewBox from width/height when one is missing", () => {
+    const svg = `<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="100"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toContain('viewBox="0 0 400 100"');
+  });
+
+  it("leaves an existing viewBox untouched", () => {
+    const svg = `<svg viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="75"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toBe(svg);
+  });
+
+  it("leaves the svg untouched when width/height are also missing", () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toBe(svg);
+  });
+
+  // Not a try/catch case: DOMParser with "application/xml" never throws, it
+  // returns a document whose root is <html> (wrapping a <parsererror>) or
+  // whatever mismatched tag the input actually closed. Either way the root's
+  // localName is not "svg", so the ordinary guard above rejects it.
+  it("leaves non-svg or unparseable input untouched", () => {
+    expect(ensureSvgViewBox("not xml at all <<<")).toBe("not xml at all <<<");
+    expect(ensureSvgViewBox("<a><b></a>")).toBe("<a><b></a>");
+  });
+
+  // A non-finite width/height would synthesize viewBox="0 0 Infinity
+  // Infinity", which blanks the icon instead of scaling it.
+  it("leaves the svg untouched when width overflows to Infinity", () => {
+    const svg = `<svg width="1e400" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toBe(svg);
+  });
+
+  // A percentage has no meaning without a viewport to resolve against, so
+  // parseFloat's unitless "100" from "100%" would produce a bogus viewBox
+  // that crops the artwork instead of scaling it.
+  it("leaves the svg untouched when width/height are percentages", () => {
+    const svg = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="200" height="50"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toBe(svg);
+  });
+
+  // A plain unit suffix is legitimate SVG and must still synthesize a viewBox.
+  it("synthesizes a viewBox when width/height carry a px suffix", () => {
+    const svg = `<svg width="400px" height="100px" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"/></svg>`;
+
+    expect(ensureSvgViewBox(svg)).toContain('viewBox="0 0 400 100"');
+  });
+});
diff --git a/packages/graph-explorer/src/core/icons/svgViewBox.ts b/packages/graph-explorer/src/core/icons/svgViewBox.ts
new file mode 100644
index 000000000..c74865abc
--- /dev/null
+++ b/packages/graph-explorer/src/core/icons/svgViewBox.ts
@@ -0,0 +1,47 @@
+/**
+ * Ensures an SVG has a `viewBox`, synthesizing one from `width`/`height` when
+ * absent.
+ *
+ * Without a `viewBox`, an SVG has no internal coordinate system to scale from:
+ * forcing a different CSS or attribute size on the root just clips the content
+ * to the new box instead of scaling it (`preserveAspectRatio` has nothing to
+ * map). A synthesized `viewBox="0 0 <width> <height>"` gives the renderer that
+ * mapping, so resizing scales instead of crops.
+ */
+export function ensureSvgViewBox(svg: string): string {
+  const doc = new DOMParser().parseFromString(svg, "application/xml");
+  const root = doc.documentElement;
+  if (root.localName !== "svg" || root.hasAttribute("viewBox")) {
+    return svg;
+  }
+
+  const width = parseFiniteLength(root.getAttribute("width"));
+  const height = parseFiniteLength(root.getAttribute("height"));
+  if (width === null || height === null) {
+    return svg;
+  }
+
+  root.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  return new XMLSerializer().serializeToString(root);
+}
+
+/**
+ * Parses an SVG `width`/`height` attribute as a positive, finite number of
+ * user units, or `null` if it is not one.
+ *
+ * `parseFloat` alone lets three malformed inputs through: `NaN`/`-5`/`0` are
+ * already guarded, but `"1e400"` parses to `Infinity` (a `viewBox="0 0
+ * Infinity Infinity"` that blanks the icon) and `"100%"` parses to the
+ * unitless number `100` (a bogus viewBox that crops the artwork instead of
+ * scaling it, since a percentage has no meaning without a viewport to
+ * resolve against). A plain unit suffix like `"400px"` is legitimate SVG and
+ * must still parse, so only a trailing `%` is rejected, not every non-digit
+ * suffix.
+ */
+function parseFiniteLength(value: string | null): number | null {
+  if (value === null || value.trimEnd().endsWith("%")) {
+    return null;
+  }
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
diff --git a/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.test.ts b/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.test.ts
index f15338e94..f64edc58c 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.test.ts
+++ b/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.test.ts
@@ -9,6 +9,7 @@ import type { VertexStyle } from "@/core";
 
 import { createVertexType } from "@/core/entities/vertex";
 import { iconRegistry } from "@/core/icons";
+import { ICON_BOX, ICON_RATIO } from "@/core/icons/iconGeometry";
 import { createRandomVertexStyle, renderHookWithState } from "@/utils/testing";
 
 import { useBackgroundImageMap } from "./useBackgroundImageMap";
@@ -24,6 +25,15 @@ function renderMap(vtConfigs: VertexStyle[]) {
   return renderHookWithState(() => useBackgroundImageMap(vtConfigs));
 }
 
+/**
+ * The wrapper nests the icon as its own data uri, so the icon's markup is
+ * encoded twice. Safe for these fixtures: base64 and our test svgs contain no
+ * literal `%`.
+ */
+function decodeIcon(url: string): string {
+  return decodeURIComponent(decodeURIComponent(url));
+}
+
 describe("useBackgroundImageMap", () => {
   beforeEach(() => {
     iconRegistry.reset();
@@ -41,7 +51,32 @@ describe("useBackgroundImageMap", () => {
     await waitFor(() => expect(result.current.size).toBe(0));
   });
 
-  it("passes raster icons through untouched", async () => {
+  // A stored icon url is not guaranteed to be well-formed UTF-16 (a lone
+  // surrogate, say). `encodeURIComponent` throws `URIError` on one, and this
+  // hook runs during style computation, so an uncaught throw here takes down
+  // the whole app through the route-level error boundary with no in-app way
+  // back to fix the value. The vertex must render with no background image
+  // instead.
+  it("omits an icon whose url is not well-formed UTF-16 instead of throwing", async () => {
+    const config = makeConfig({
+      type: createVertexType("Malformed"),
+      iconUrl: "data:image/png;base64,AAA\uD800BBB",
+      iconImageType: "image/png",
+    });
+
+    let result: ReturnType<typeof renderMap>["result"];
+    expect(() => {
+      ({ result } = renderMap([config]));
+    }).not.toThrow();
+
+    await waitFor(() => expect(result!.current.size).toBe(0));
+  });
+
+  // Issue #2108: cytoscape cannot both preserve an image's aspect ratio and
+  // inset it, so the inset is baked into a square svg wrapper and the nested
+  // `preserveAspectRatio` does the fitting. That works for every icon kind
+  // without measuring anything, so a raster is wrapped just like an svg.
+  it("wraps a raster icon in a padded square svg", async () => {
     const config = makeConfig({
       type: createVertexType("Raster"),
       iconUrl: "https://example.test/a.png",
@@ -51,13 +86,118 @@ describe("useBackgroundImageMap", () => {
     const { result } = renderMap([config]);
 
     await waitFor(() =>
-      expect(result.current.get(createVertexType("Raster"))).toBe(
-        "https://example.test/a.png",
-      ),
+      expect(result.current.has(createVertexType("Raster"))).toBe(true),
     );
+    const url = result.current.get(createVertexType("Raster"))!;
+    expect(url.startsWith("data:image/svg+xml;utf8,")).toBe(true);
+    const wrapper = decodeURIComponent(url);
+    expect(wrapper).toContain(`viewBox="0 0 ${ICON_BOX} ${ICON_BOX}"`);
+    expect(wrapper).toContain('preserveAspectRatio="xMidYMid meet"');
+    // Inset the icon needs for the ellipse shape, computed from the same
+    // constants VertexSymbol's preview box uses, so this also guards the two
+    // staying in sync.
+    const size = ICON_BOX * ICON_RATIO;
+    const offset = (ICON_BOX - size) / 2;
+    expect(wrapper).toContain(`x="${offset}"`);
+    expect(wrapper).toContain(`y="${offset}"`);
+    expect(wrapper).toContain(`width="${size}"`);
+    expect(wrapper).toContain(`height="${size}"`);
+    expect(decodeIcon(url)).toContain("https://example.test/a.png");
     expect(fetch).not.toBeCalled();
   });
 
+  // Issue #2108, the case the wrapper alone does not solve: without a viewBox
+  // the nested image has no intrinsic ratio for `preserveAspectRatio` to fit,
+  // so it fills the padded box and comes out square — the original bug. A
+  // synthesized viewBox is what keeps a plain `<svg width height>` export,
+  // which is exactly what many icon exporters produce, from being squashed.
+  it("carries a synthesized viewBox for an svg that declares only width and height", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() =>
+        Promise.resolve(
+          new Response(
+            `<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="100"/></svg>`,
+          ),
+        ),
+      ),
+    );
+
+    const config = makeConfig({
+      type: createVertexType("NoViewBox"),
+      iconUrl: "https://example.test/wide.svg",
+      iconImageType: "image/svg+xml",
+    });
+
+    const { result } = renderMap([config]);
+
+    await waitFor(() =>
+      expect(result.current.has(createVertexType("NoViewBox"))).toBe(true),
+    );
+    expect(
+      decodeIcon(result.current.get(createVertexType("NoViewBox"))!),
+    ).toContain('viewBox="0 0 400 100"');
+  });
+
+  // Same fix, the other axis: a tall icon must synthesize a viewBox that
+  // keeps height as the dominant dimension, not just width.
+  it("carries a synthesized viewBox for a tall svg that declares only width and height", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() =>
+        Promise.resolve(
+          new Response(
+            `<svg width="100" height="400" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="400"/></svg>`,
+          ),
+        ),
+      ),
+    );
+
+    const config = makeConfig({
+      type: createVertexType("TallNoViewBox"),
+      iconUrl: "https://example.test/tall.svg",
+      iconImageType: "image/svg+xml",
+    });
+
+    const { result } = renderMap([config]);
+
+    await waitFor(() =>
+      expect(result.current.has(createVertexType("TallNoViewBox"))).toBe(true),
+    );
+    expect(
+      decodeIcon(result.current.get(createVertexType("TallNoViewBox"))!),
+    ).toContain('viewBox="0 0 100 400"');
+  });
+
+  // The (icon, color) render cache is keyed by concatenation, so the separator
+  // must be a character that cannot occur in either half. An IconSourceId
+  // embeds the user-supplied icon url verbatim, and the color is an
+  // unvalidated string, so a printable separator like "|" lets two distinct
+  // pairs produce one key and swap icons between vertex types.
+  it("does not collide when a separator character appears in the icon url and color", async () => {
+    const shared = makeConfig({
+      type: createVertexType("PipeInColor"),
+      iconUrl: "https://example.test/a.svg",
+      iconImageType: "image/svg+xml",
+      color: "x|#FF0000",
+    });
+    const shifted = makeConfig({
+      type: createVertexType("PipeInUrl"),
+      iconUrl: "https://example.test/a.svg|x",
+      iconImageType: "image/svg+xml",
+      color: "#FF0000",
+    });
+
+    const { result } = renderMap([shared, shifted]);
+
+    await waitFor(() => expect(result.current.size).toBe(2));
+    const second = decodeIcon(
+      result.current.get(createVertexType("PipeInUrl"))!,
+    );
+    expect(second).toContain("color:#FF0000");
+    expect(second).not.toContain("color:x|#FF0000");
+  });
+
   it("styles a fetched svg into a data uri", async () => {
     const config = makeConfig({
       type: createVertexType("Svg"),
@@ -71,9 +211,9 @@ describe("useBackgroundImageMap", () => {
     await waitFor(() =>
       expect(result.current.has(createVertexType("Svg"))).toBe(true),
     );
-    const value = result.current.get(createVertexType("Svg"))!;
-    expect(value.startsWith("data:image/svg+xml;utf8,")).toBe(true);
-    expect(decodeURIComponent(value)).toContain("color:#FF0000");
+    const url = result.current.get(createVertexType("Svg"))!;
+    expect(url.startsWith("data:image/svg+xml;utf8,")).toBe(true);
+    expect(decodeIcon(url)).toContain("color:#FF0000");
   });
 
   it("styles a lucide icon into a data uri carrying the node color", async () => {
@@ -89,9 +229,9 @@ describe("useBackgroundImageMap", () => {
     await waitFor(() =>
       expect(result.current.has(createVertexType("Lucide"))).toBe(true),
     );
-    const value = result.current.get(createVertexType("Lucide"))!;
-    expect(value.startsWith("data:image/svg+xml;utf8,")).toBe(true);
-    expect(decodeURIComponent(value)).toContain("color:#00FF00");
+    const url = result.current.get(createVertexType("Lucide"))!;
+    expect(url.startsWith("data:image/svg+xml;utf8,")).toBe(true);
+    expect(decodeIcon(url)).toContain("color:#00FF00");
   });
 
   it("omits configs with no icon and unresolvable icons", async () => {
@@ -134,12 +274,12 @@ describe("useBackgroundImageMap", () => {
     const { result } = renderMap([red, blue]);
 
     await waitFor(() => expect(result.current.size).toBe(2));
-    expect(
-      decodeURIComponent(result.current.get(createVertexType("Red"))!),
-    ).toContain("color:#FF0000");
-    expect(
-      decodeURIComponent(result.current.get(createVertexType("Blue"))!),
-    ).toContain("color:#0000FF");
+    expect(decodeIcon(result.current.get(createVertexType("Red"))!)).toContain(
+      "color:#FF0000",
+    );
+    expect(decodeIcon(result.current.get(createVertexType("Blue"))!)).toContain(
+      "color:#0000FF",
+    );
     // One icon identity, so one fetch — color is applied by a pure transform.
     expect(fetch).toBeCalledTimes(1);
   });
diff --git a/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.ts b/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.ts
index 1a52a156e..8e1d750b3 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.ts
+++ b/packages/graph-explorer/src/modules/GraphViewer/useBackgroundImageMap.ts
@@ -8,6 +8,8 @@ import {
   toIconImageUrl,
   useResolvedIcons,
 } from "@/core/icons";
+import { encodeSvg, ICON_BOX, ICON_RATIO } from "@/core/icons/iconGeometry";
+import { logger } from "@/utils";
 
 /**
  * Maps each vertex type to its cytoscape `background-image`.
@@ -48,13 +50,60 @@ export function useBackgroundImageMap(
     if (!icon) {
       continue;
     }
+    // NUL cannot occur in an icon url or a color, so it is the only safe
+    // separator: an IconSourceId embeds the user-supplied url verbatim.
     const renderKey = `${id}\u0000${color}`;
     let backgroundImage = rendered.get(renderKey);
     if (backgroundImage === undefined) {
-      backgroundImage = toIconImageUrl(icon, color);
+      const wrapped = insetIconImage(toIconImageUrl(icon, color));
+      if (wrapped === null) {
+        continue;
+      }
+      backgroundImage = wrapped;
       rendered.set(renderKey, backgroundImage);
     }
     result.set(type, backgroundImage);
   }
   return result;
 }
+
+/**
+ * Centers an icon at {@link ICON_RATIO} of a square canvas, preserving its
+ * aspect ratio.
+ *
+ * Cytoscape cannot do both parts itself: `background-fit: contain` keeps the
+ * ratio but fills the whole node box, and the node is an ellipse, so a
+ * square-ish icon's corners spill outside the shape. Setting explicit
+ * percentages insets the icon but forces both axes, which is what squashed
+ * non-square icons (issue #2108). Baking the inset into a square svg leaves
+ * cytoscape a square to fit, and delegates the ratio to the nested image's
+ * `preserveAspectRatio`.
+ *
+ * The nested icon must carry a `viewBox`, or it has no intrinsic ratio to fit
+ * and fills the padded box — square again. The icon registry guarantees one.
+ *
+ * Returns `null`, rather than throwing, for a url that is not well-formed
+ * UTF-16 (e.g. a stored value containing a lone surrogate): `encodeURIComponent`
+ * throws `URIError` on one, and this runs during style computation, so an
+ * uncaught throw here takes down the whole app through the route-level error
+ * boundary with no in-app way back. The vertex renders with no background
+ * image instead.
+ */
+function insetIconImage(iconUrl: string): string | null {
+  if (!iconUrl.isWellFormed()) {
+    logger.warn("Icon url is not well-formed, skipping", iconUrl);
+    return null;
+  }
+  const size = ICON_BOX * ICON_RATIO;
+  const offset = (ICON_BOX - size) / 2;
+  return encodeSvg(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${ICON_BOX}" height="${ICON_BOX}" viewBox="0 0 ${ICON_BOX} ${ICON_BOX}">` +
+      `<image href="${escapeXmlAttribute(iconUrl)}" x="${offset}" y="${offset}" width="${size}" height="${size}" preserveAspectRatio="xMidYMid meet"/>` +
+      `</svg>`,
+  );
+}
+
+/** The url becomes an XML attribute value, so `&` and `"` must not break it. */
+function escapeXmlAttribute(value: string): string {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;");
+}
diff --git a/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx b/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx
index 33da0ec8a..293130895 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx
+++ b/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx
@@ -55,8 +55,18 @@ describe("useGraphStyles", () => {
 
     await waitFor(() => {
       const vertexStyle = getStyles(result)[`node[type="Person"]`] as any;
+      // The raster is wrapped in a padded square svg so the canvas can fit it
+      // without measuring (issue #2108); sizing now comes from the node
+      // defaults, not per type. Decode and check the wrapper actually nests
+      // the icon's real url — a bare data-uri prefix check would also pass if
+      // the wrapper had lost the url or wrapped the wrong one.
+      const backgroundImage = vertexStyle["background-image"] as string;
+      expect(backgroundImage.startsWith("data:image/svg+xml;utf8,")).toBe(true);
+      expect(decodeURIComponent(backgroundImage)).toContain(
+        RASTER_ICON.iconUrl,
+      );
       expect(vertexStyle).toEqual({
-        "background-image": RASTER_ICON.iconUrl,
+        "background-image": backgroundImage,
         "background-color": "#128EE5",
         "background-opacity": 0.8,
         "border-color": "#000000",