Images and icons
Upload pictures to your project's image library, place them on a screen, use them as backgrounds, and pick icons.
Use this page when you want to add a photo or logo, fill a layer with a picture, or put a small symbol next to a feature.
Add an image
Add an Image layer from the Components panel (or select an existing one).
In the Design panel, under Content, click the preview box. It reads Choose Image when empty and Change Image on hover when it holds a picture.
The Image Library opens. Click an image to use it, or click Upload to add a new one.
The Image Library
The library shows every image uploaded to the current project, newest first. Images are shared by all screens in the project.
| Part | What it does |
|---|---|
| Counter | "N of M images", or "No images yet". |
| Upload | Opens your file picker. The button reads Uploading... while the file transfers. |
| Image tile | Click to use the image. Hover for the file name. |
| Delete button | Appears on a tile when you hover. Asks "Delete image?" first. |
| Load more | The library loads 20 images at a time. Click to load the next 20. |
The library has no search box.
Upload limits
| Rule | Value |
|---|---|
| File types | PNG, JPEG, WEBP, GIF |
| Maximum size | 5 MB per image |
| File name | Up to 200 characters |
| Who can upload or delete | Editors, admins and owners. Viewers can browse only. |
If you pick a file of another type you see "Only PNG, JPEG, WEBP, or GIF images are supported." If the file is too big you see "Image must be 5 MB or smaller." If the upload fails midway, try again: you see "Failed to upload image" or "Upload not found. Try uploading again."
Miniwall stores the file as you uploaded it. It does not resize or convert it, so upload an image sized for how it is shown (about twice its display size is plenty) to keep the screen fast.
How uploads work
The editor asks the Miniwall API for a short-lived upload address, sends the file straight from your browser to the project's storage, and then confirms it. The image gets a public address, and that address is what the screen saves. Visitors' browsers load the picture from there.
Deleting an image removes it for everyone. Any screen that still uses it, including a published one, shows a broken image. Replace the picture on those screens first.
If your site sets a Content Security Policy, allow the storage address in img-src. See Security and CSP.
Image settings
With an Image layer selected, the Design panel has these sections.
| Section | Settings |
|---|---|
| Content | The picture. In dark preview, Add dark image or Use the light image (see below). |
| Layout | Width and Height, and Fit Mode: Fit content or Fill. |
| Spacing | Padding and Margin. |
| Mask Shape | Optional. Add it to crop to a Rectangle (with a radius for each of the four corners) or a Circle. |
| Color Overlay | Optional. Adds a color layer over the picture, for example to darken a photo behind text. |
| Border | Optional. Color and width. |
| Drop Shadow | Optional. X, Y, Radius and Color. |
Width and height work like on other layers. See Components for the size options.
A different image in dark mode
Switch the preview to dark mode (the moon button above the canvas). Under Content, a note says "Dark mode shows the light image." Click Add dark image to give dark mode its own picture, then choose a new one. Click Use the light image to go back. Without a dark image, visitors in dark mode see the light one.
Backgrounds
You can also fill a layer or the whole screen with a picture.
| Where | How |
|---|---|
| A Stack, Tabs or Carousel layer | Fill section. |
| The whole screen | Select Screen at the top of Layers, then turn on Screen Background. |
In each of these the background has a Color or Image switch.
- Color: a solid or gradient color. See Colors and dark mode.
- Image: pick a picture the same way as above. Set Fit Mode (Fit content or Fill) and an optional Color Overlay. Switching to Image starts with a placeholder picture, so choose your own right away.
Video backgrounds are not available. A screen that already has one shows "Video background isn't supported yet." and is left untouched.
Icons
An Icon layer shows a small single-color symbol. Use it for bullets, checkmarks, badges and buttons.
Pick an icon
Select an Icon layer and, under Content, click the icon button (it reads Select an icon... when empty). A panel opens with a search box (Search icons…) and a grid of about 210 icons. Type part of a name, such as check or crown, to filter the grid. Hover an icon to see its name. Click one to use it. If nothing matches you see "No icons match" and the search text.
The set is a curated selection of the Lucide icon family, grouped by what screens usually need: checks and actions, arrows, alerts, trust and security, premium and rewards, money and pricing, time, people, communication, files, devices, media, health, travel, nature and shapes.
You cannot upload your own icon. For a logo or a multicolor picture, use an Image layer.
Icon settings
| Section | Settings |
|---|---|
| Content | The icon. |
| Color | A solid color. Icons are drawn as a shape filled with this color, so they have one color only. Gradients are not available. |
| Size | Width and Height. An icon with no size set is 24 by 24. |
| Spacing | Padding and Margin. |
| Icon Background | Optional. Adds a shape behind the icon: Shape (Rectangle with four corner radii, or Circle), Color (solid), Border and Drop Shadow. |
An icon inside a plan card, an answer or a tab button also has Default and When selected tabs, so the icon can change color when picked. See Packages and pricing.
Each icon is a small file that the visitor's browser fetches from the Iconify service (api.iconify.design) when the screen shows. If your site has a strict Content Security Policy, allow that address. See Security and CSP.