Step 1: Inline SVG
Copy the <svg>...</svg> markup with Edit > Copy as Code > SVG (Ctrl+Shift+C) and paste it directly into your HTML. Pros: full CSS control over individual paths, currentColor theming, JavaScript event listeners, SMIL animation, accessibility. Cons: HTML payload grows.
For the smallest paste, turn on "Optimize with SVGO" and turn off "Pretty-print output" on an SVG export item. SVGSketch also has a dedicated HTML export format that wraps the SVG in a ready-to-serve page, switched between the two modes by the "Embed SVG inline (vs data URL)" option.
Step 2: <img src="icon.svg">
Reference the SVG file with an <img> element. Pros: caches independently, easy to swap, smaller HTML. Cons: your page CSS cannot reach the SVG at all, so currentColor resolves to the SVG's own color rather than yours, and scripting is off. Pick this for static icons that do not need theming.
The rules here are spec-defined, not browser quirks: SVG 2 requires an image reference to be processed in secure animated mode, which permits declarative animation but forbids scripting, interactivity, and - the one that catches people - external references. An SVG that pulls in a webfont, a stylesheet, or another image will render without them. That is precisely why SVGSketch inlines font outlines into the file on export rather than linking to Google Fonts.
Step 3: `<object>` for self-contained SVG
Use <object data="icon.svg" type="image/svg+xml"> to embed an external SVG as its own document, which keeps scripting and its internal CSS alive. Pros: animation and JavaScript still work, and you can supply fallback content between the tags. Cons: an extra HTTP request, accessibility quirks, and a stylesheet boundary - your page CSS does not cascade into the object, so theming means either styles written inside the SVG or same-origin JavaScript reaching in through contentDocument.
<iframe> and <embed> behave similarly and are worth knowing about, but <object> is the one with a usable fallback story, so reach for it first.
Step 4: CSS background-image
Use background-image: url(icon.svg) for decorative backgrounds. Pros: clean separation of content and decoration. Cons: cannot be themed via CSS variables, no scripting, accessibility-invisible (which is right for purely decorative content).
A data URI does not solve theming: it is still a separate document, so neither your custom properties nor currentColor reach inside it. For a background that follows a CSS variable, use the SVG as a mask instead - mask-image: url(icon.svg) with background-color: var(--icon-color) tints the shape with whatever the token holds. Otherwise, inline the SVG.
Step 5: Reuse one symbol many times
When the same icon appears repeatedly, inline it once as a <symbol> inside a hidden <svg> at the top of the page, then place each instance with <use href="#icon-name">. The geometry is parsed once, every instance still inherits your CSS, and the markup at each call site is a single short element.
Note the boundary: a <use> that points at an external file is loaded in secure static mode, which strips animation and scripting. Sprite reuse is for icons within the current document, not a way to hot-link someone else's SVG.
Step 6: Size it deliberately
Sizing behaves differently per method. Inline SVG has no intrinsic size of its own once it is in your document, so give it width and height in CSS, or a viewBox plus width:100% and height:auto to make it scale with its container. An <img> uses the SVG's own width and height attributes as its intrinsic size, and falls back to 300 by 150 pixels if the file declares none - the usual cause of an icon that arrives mysteriously large.
For anything responsive, make sure the file carries a viewBox. Without one there is no aspect ratio to preserve and no way to scale the artwork to a box.
Step 7: Pick by use case
Inline SVG for icon components, charts, and anything you will style or animate. <img> for static brand assets and content images. <object> for legacy or self-contained interactive SVGs. CSS background for purely decorative artwork.