Skip to main content
Documentation/Elements Reference/Other/SVG Icon
Elements Reference

SVG Icon

The SVG Icon element displays an icon as inline SVG — no icon fonts, no extra requests.
Pick from the bundled icon libraries or upload your own SVGs.

A new SVG Icon starts as a star.

Choosing an icon

The Content tab has a single Icon control showing the current icon. Click
Choose and the Icon Library dialog opens:

The Icon Library dialog
The Icon Library dialog
  • The sidebar lists the bundled sets — FontAwesome 6 Free (Brands, Regular, Solid)
    and IcoMoon Free — plus All Icons to browse everything at once.
  • The search box filters the current view by name.
  • Click an icon to use it — the dialog closes and the canvas updates immediately.

Uploading your own icons

The Upload button in the dialog's sidebar switches to the upload view: drag in
individual SVG files or an IcoMoon symbol-defs.svg, choose whether to save them to an
existing set or create a new icon set, and click Save Icons.

On the front end

The element renders a wrapper div (a generated per-element class plus
oxy-svg-icon2) containing the icon's actual <svg> markup inline. Because the SVG is
right there in the page, there's no separate file to load. The wrapper tag can be
switched to figure via the tag control.