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 images in by dragging, dropping or pasting, pick icons from the built-in catalog, and both 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

Shippp has an icon catalog with three open-source sets: Lucide, Phosphor and Material Symbols. With nothing selected, open the Assets tab in the right panel and choose Icons.

Pick a set
Open Lucide, Phosphor or Material Symbols, or search with Search icons….
Set the style
The settings button shows the options of the set, with a live preview: Weight (stroke width) for Lucide, Style (Thin, Light, Regular, Bold, Fill, Duotone) for Phosphor, and Style, Weight and Fill for Material Symbols.
Insert it
Drag an icon onto the canvas, or click it and then click where it goes.

An inserted icon's color is in its Fill row, like any other fill, and can use a color token.
Inside a component, turn on Icon property on the icon layer so every instance can swap the icon. See Components.
In code, Lucide and Phosphor icons use their React packages (lucide-react, @phosphor-icons/react); Material Symbols and your own icons export as inline SVG.

Your own icons and SVG

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 it in Fill and Border, or change every color at once in Selection colors. Turn icons you reuse into components.

Gradients

In Fill, choose Gradient for linear, radial or angular gradients. While the fill is open, handles appear on the canvas: drag the gradient line and the stops, and click the line to add a stop. Hold ⇧ to snap the angle to 15°. The panel follows live, and gradient stops can use color tokens.

Tip

The color picker keeps your Recent colors, and the fill type picker switches between Color, Gradient and Image.

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.

Text & typography

Tokens