Your own images and skins

Upload art, 9-slice it, make Image Buttons and skin bars, toggles and checkboxes.

Got your own button art, frames or backgrounds? Upload them, and use them as pictures, as buttons, or as skins for the built-in components.

Upload images

1. In the left panel, open Components → Images.
2. Click Upload images, or drop files onto the panel. PNG, JPG, WebP, GIF and SVG all work.

Your images are available in all your projects and go to Unity as real sprites. Each image shows where it is used. Your plan decides how much space you have (see Plans).

Put an image on the screen

Click an image in the panel, or drag it onto the canvas. It becomes an Image element. In its Properties:

• Fit: Stretch to the box, Fit inside (keeps its shape) or Fill the box (crops).
• Tint and Opacity: colour it in or fade it.
• Flip horizontally / vertically.

Stretch without blurry corners: 9-slice

A frame or button stretched wider usually gets ugly, squashed corners. 9-slice fixes that: the corners stay as they are and only the middle stretches.

1. Next to the image in Properties, click the 9-slice button (the grid icon).
2. Drag the guides so the corners hold the parts that must not stretch.
3. Check the result under Preview when resized, then close the window.

9-slice Corner Scale makes the corners bigger or smaller without changing the image.

Make a button from your art: the Image Button

Add an Image Button from the library (under Buttons), then pick your images:

• Normal Image: how it usually looks.
• Hover, Pressed and Disabled Image: optional. Without them, Darken on hover / press shades the normal image for you.
• Label: optional text on top, with its own font, size and colour.

It works like any other button: give it Actions, Animations and Sounds.

Skins: your art on built-in components

Some components can swap their colours for your images while keeping their behaviour:

Component · Skin images

Health Bar, Progress Bar · Track Image (the empty bar) and Fill Image (the full part) Toggle Switch · Track Image (on), Track Image (off) and Knob Image Checkbox · Box Image, Box Image (ticked) and Mark Image Radial Cooldown / Slider · Track Image, Fill Image, Center Image and Knob Image

Find them in the component's Properties and click Choose…. A skinned bar still fills with its value, a skinned toggle still slides, a skinned radial still fills around the circle from its start angle, and Unity builds the same native controls with your sprites.

Tip: For a radial, use square art with the ring centred (track and fill the same size). The fill art is revealed around the circle, so a full ring works best.

Tip: Give bar fill images a 9-slice. The fill then stretches neatly to any value instead of being cut off.

Image backgrounds

A screen can use one of your images as its background: click an empty part of the canvas, then in the Screen tab set Background Type to Image.