# Add images to your UI

> Add pictures or a simple rectangle to your user interface (UI) as a background or visual element.

You can use image elements to display photos, company logos, product diagrams, custom icons, and more. You can also use simple colored rectangles to create backgrounds.

This guide explains how to add basic colored shapes to your UI Canvas and how to import and place your own custom image files.

## Add a rectangle and change its color

To add a simple rectangle to your UI and change its color:

1. In the **Hierarchy** panel, select your **UI Canvas**.
2. Right-click and choose **UI** > **Image** to create a new image element
3. In the **Inspector** panel, select the **Color** property and choose a color for your image element.

## Add your own image

To add your own image to the UI:

1. In the **Project** panel, select **Import Assets**.
2. Select your current project in the **Projects** panel.
3. Select **Add** and choose an image file (PNG, JPG, or JPEG) from your device.
4. Select **Upload** to add the image to the project.
5. Choose the images you want to import and select **Import**. Unity Studio adds the images to the **My Assets** folder in the **Project** panel.
6. In the **Hierarchy** panel, select your **UI Canvas**.
7. Drag your uploaded image from the **My Assets** folder in the **Project** panel onto the canvas in the **Scene** view.

## Additional resources

* [Unity Engine - UI Image Documentation](https://docs.unity3d.com/Manual/script-Image.html)
* [UI Creator](/unity-studio/develop/ui-creator/.md)
* [UI Canvas](/unity-studio/develop/ui-creator/canvas-ui.md)
* [Button](/unity-studio/develop/ui-creator/button.md)
* [Text](/unity-studio/develop/ui-creator/text.md)
* [Input Field](/unity-studio/develop/ui-creator/input-field.md)
* [Web View](/unity-studio/develop/ui-creator/web-view.md)
* [Video](/unity-studio/develop/ui-creator/video.md)
* [Toggle](/unity-studio/develop/ui-creator/toggle.md)
* [Slider](/unity-studio/develop/ui-creator/slider.md)