Toolbar & Tools

The right toolbar holds all the editing and drawing tools. Click any tool below to learn how to use it, or look for its icon on the screen to switch quickly.

Pencil

Freehand pixel drawing. Paints with the active color. Supports adjustable brush size (1px to 16px) and opacity. Hold Shift while drawing to snap your strokes to straight lines.

Brush

Paints round, antialiased strokes with transparent edge pixels. Choose a size from 1px to 32px, adjust opacity, and use Hardness to control how quickly the stroke fades toward its edge. At 1px and 2px there are not enough pixels to form a visibly round fade, so those sizes behave much like a lower-opacity Pencil; use 3px or larger when you want a distinct soft edge.

Eraser

Removes pixels from the active layer. Shares the hard-edged size slider (1px to 16px). You can lower the opacity for a softer erase effect or for gradient cleanup work.

Fill (Flood Fill)

Fills connected pixels of a matching color with your active color. If a selection is active, the fill area is constrained inside the selection boundaries.

Magic Wand

A unified color and area selection tool. Click a color on the canvas to select all matching pixels, or click and drag to draw a rectangular marquee. Set the Tolerance in its settings block to select near matches.

Picker (Color Eyedropper)

Samples any existing pixel color from the canvas. Click on a pixel to capture its exact RGBA color and automatically set it as the active drawing color.

Line

Draws straight pixel lines on the active layer. Hold Shift to constrain the line angles to perfect 45-degree or 90-degree steps.

Rectangle

Draws outline rectangles on the active layer. The border thickness is driven by the current brush size settings.

Circle

Draws outline circles or ellipses on the active layer. Hold Shift while dragging to lock the proportions into a perfect circle.

Select (Marquee)

Selects custom rectangular areas. Limits edits to the selected pixels. Hold Shift-drag to add areas, or Alt-drag to subtract areas.

Move Tool

Moves elements around. Dragging on the canvas shifts the active layer. You can enable Move all layers together or Apply move to every frame in its flyout options when making global shifts.

Test Your Cursor with Live Preview

Live Cursor Preview flyout with test surface and background options
Live Cursor Preview

Click Preview on the right toolbar to open the Live Cursor Preview flyout. Move into its test area to apply your artwork as the actual browser cursor. Opening the panel alone does not generate anything; cursor images are created lazily on first pointer entry and cached until the artwork changes.

  • Backgrounds: Test over dark, light, or transparency checkerboard surfaces. Checkerboard is the default and follows the editor theme.
  • Animation: Animated cursors play through CSS keyframes using your frame delays and hotspots.
  • Hotspot trail test: Hold the mouse button and drag inside the surface. The trail begins and follows from the cursor's active hotspot—the exact point the browser registers—so you can verify its alignment in real time before exporting. Use Clear to erase the trail; closing the flyout clears it automatically.
  • Active size: Preview uses the active Size Shelf artwork. Sizes above 128px are temporarily scaled to 128px with a proportional hotspot for browser compatibility; the original artwork is unchanged. See Multi Sizes and Hotspots.

Brush Settings & Opacity

Pencil, Eraser, Line, Rect, and Circle share hard-edged size and opacity controls up to 16px. The separate Brush supports round sizes up to 32px and adds Hardness from 0% for a wide transparent fade to 100% for a solid center with a narrow antialiased boundary. The on-canvas outline shows the full footprint that will be painted or erased. At a canvas edge, the part outside the canvas is clipped while the preview retains its real size and shape.

Pointers Panel

Pointer Library

The Pointers panel contains high-quality pre-designed cursor silhouettes (classic arrows, loading frames, help indicators). Drag one onto your canvas, or click to place it centered. The pointer scales and recenters in an import preview, allowing you to align it perfectly before committing.