Shapes and paths

Rive uses shape layers and path layers together to display vector graphics

Shape layers

Vectors in Rive are rendered on shape layers. Shape layers allow you to set Fill and Stroke colors for your paths.

Quickly navigate between Shape layers and Path layers using the Enter and Esc shortcuts to move up/down in the Hierarchy.

Path layers

The actual shape of a vector is defined by a path (or multiple paths). Expanding a shape layer in Rive will reveal the paths it's using. Path layers only exist under shape layers.

In the example below, two paths are used to create a cross icon. The shape layer, named "Cross Shape" defines the fill color.

To add another path to a shape layer, select an existing path under the desired shape first, then create a new path using either a procedural shape or the pen tool. You can also drag/drop or copy/paste paths from one shape to another.

To modify the procedural properties of a path, like the rounded corners of a rectangle or the points in a star shape, you need to select the path layer (not the shape layer).