Use Icons and SVG Images
Insert a built-in icon or import a project SVG and choose its size and color.
Insert a built-in icon
- Open Assets → Icons in Studio.
- Search for an icon, such as
gamepad-2. - Drag it into the source, Preview, or a static Hierarchy container.
- Save and check it in Preview.
Studio inserts a built-in Icon element; it needs no import:
<Icon name="gamepad-2" size="32" color="#5dd4ee" stroke="1.5" />| Attribute | Default | What it changes |
|---|---|---|
| name | Required for built-in icons | The Lucide icon name |
| size | 1em | Width and height; explicit numeric sizes are from 1 to 2048 pixels |
| color | currentColor | Icon color; omitted color follows the surrounding text |
| stroke | 2 | Line thickness in the icon's 24-by-24 design coordinates |
Omit size to make the icon follow its container's font size. An explicit size
wins over that default. stroke-width and strokeWidth also name the stroke
setting. Ordinary class, id, style, and title attributes are supported.
Explicit sizes remain stable on the first Preview frame and across media-query
breakpoints. Preview zoom changes raster resolution, not the icon's logical size.
To change icons using props, bind the values:
<Icon :name="props.icon" :size="props.iconSize" color="var(--color-accent)" />The parent must supply those props and the shared color. Misspelled icon names or invalid sizes are reported in Problems.
Import an SVG
Open Assets → Project Assets → Import, choose the SVG, and confirm its asset name. Use Insert as Icon or reference its asset name in source:
<Icon src="asset://game-ui/sprout" size="32" color="#66c9e6" />
<img src="asset://game-ui/logo" class="brand-logo" />Replace the example names with assets you imported. Use either name for a
built-in icon or src for a project SVG, not both. The color setting only
replaces SVG colors authored as currentColor; fixed fill and stroke colors remain.
Supported SVG content
CalmUI supports static paths, groups, rectangles, circles, ellipses, lines, polylines, and polygons. Transforms, curves, arcs, solid fills and strokes, opacity, fill rules, joins, and caps are supported.
Scripts, event attributes, external references, embedded images, animation, text, filters, masks, patterns, and gradients are rejected. Export text as paths or simplify unsupported SVG features in the source artwork before importing.
Accepted SVGs are included in the prepared package, so the game does not need the original SVG files. Icons adapt to display scale in Studio and Unreal. Check their final appearance with the rest of your game UI.