Design
Images, icons & assets
Place images, bring in SVG icons, recolor them and crop image fills.
Images and icons are ordinary layers in Shippp. You bring them in by dragging, dropping or pasting, and they export together with your code.
Add images
- Drag an image file from your computer onto the canvas, or paste it from the clipboard.
- Drop it onto a container to place it inside that container's smart layout.
- Or use an image as a fill: in Fill, choose Image and Upload image.
The Image section
| Control | What it does |
|---|---|
| Crop / reposition | Move and scale the image inside its frame. |
| Zoom | Scale the image within the crop. |
| Fit | How the image fills its box (for example cover or contain). |
| Focus | Which part stays visible when the image is cropped: center, top, bottom, left or right. |
| Alt | Describe the image. Alt text is exported for screen readers and SEO. |
| Replace image… | Swap the file and keep size, crop and position. |
Tip
Always write Alt text for meaningful images. It costs a few seconds and it ships straight into the accessible HTML.
Icons and SVG
Shippp works with your own icon set. Drag an .svg file onto the canvas or paste SVG code — for example copied from your icon library — and it becomes a vector layer.
- Recolor icons with Icon fill and Icon border, or change every color at once in Selection colors.
- Bind icon colors to color tokens so they follow your theme.
- Turn frequently used icons into components. Then use Swap icon on an instance to switch between them.
Gradients
In Fill, choose Gradient for linear or radial gradients. Use Add stop, Flip direction and Rotate 90° to shape it. Gradient stops can use color tokens.
Effects
The Effects section adds drop shadows, inner shadows, layer blur and background blur. Save combinations you reuse as effect styles — they become shadow tokens in the export.