Pebble 5 finishes

Pebble icons, from flat lines to solid stone.

229 rounded icons for apps and the web, in five finishes. Line and Soft are the original flat set; Clay, Layers and Glass stack shadows, bodies and highlights for depth. Every finish comes from one color you choose.

Browse the set Get it for iOS and Android

All icons

How the depth works

Each icon is a small stack of flat layers. Offsets and shading fake the volume; spreading the layers apart in CSS 3D makes it real enough to tilt.

What's in an icon

The finish you pick in the toolbar decides the layers. This is the current one, taken apart.

Shadows and sides sit lower and slightly offset down, like light coming from above. The face carries a white gradient that fades out by two thirds of the way down, which reads as a rounded top.

One color drives it all

Every layer is built from currentColor plus black or white at fixed opacities.

Set color and the body, the darker side and the highlight all follow. Nothing needs a second palette, so any brand color works.

.upload-button { color: #1F7A8C; }  /* shadow, side, face and carve all follow */

Three finishes

Two flat, three with depth. Pick the one that suits the surface the icons sit on.

  • Line is the original outline style: one stroke, one color, sharp at every size down to 16px.
  • Soft adds a 16% tint of the same color inside the main shape. It is still flat and still one color.
  • Clay is solid and extruded. It holds up best at 32px and above, on flat light or dark backgrounds.
  • Layers floats the line icon over a tinted plate. It stays the most legible at small sizes.
  • Glass is a frosted body with a bright edge. It looks best on colored or photographic backgrounds.

Flat SVG or live layers

Copy a single flattened SVG, or keep the layers separate to tilt them.

Copy SVG in the icon panel gives one self-contained file with the layers baked in as offsets. It works anywhere an SVG does, including design tools.

For the tilting effect, put each layer in its own element and push it forward on the Z axis:

.stack    { transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-18deg); }
.stack svg { position: absolute; inset: 0;
             transform: translateZ(calc(var(--z) * 2px)); }
.stack .shadow { --z: 0; filter: blur(1.5px); }
.stack .face   { --z: 2; }

The parent needs a perspective value, around 400px for small icons and 900px for large ones.

In a mobile app

Use Line for idle tabs and your chosen finish for the active one. Switch the phone to Arabic to see directional icons mirror.

Icons that point somewhere, like back arrows, chevrons, send and reply, should flip in right-to-left layouts. Icons that show a real object or a clock direction, like refresh, play and the phone, stay as they are. The icon panel marks the ones that flip.

[dir="rtl"] .pi-mirror { transform: scaleX(-1); }
// iOS: set the asset's Direction to "Left to Right, Mirrors"
// Android: android:autoMirrored="true" on the vector drawable

Take it to iOS and Android

Download every icon at once, in the finish, color and weight you have selected above.

  • Line and Soft: use the SVGs as vectors. In Xcode, drop them into an asset catalog and tick Preserve Vector Data. In Android Studio, use File, New, Vector Asset, Local file.
  • Clay, Layers and Glass: use the PNGs. They rely on blur and gradients, which Android vector drawables do not support and which render unevenly as iOS vectors.
  • For tinting in code, export Line or Soft in Auto color and set tintColor on iOS or app:tint on Android.

Motion and accessibility

Depth is decoration. Keep meaning in the label.

  • Pointer tilt and the hero animation switch off when the system asks for reduced motion.
  • Hide stacked layers from screen readers with aria-hidden="true" on the wrapper, and name icon-only buttons with aria-label.
  • The side and shadow layers lower contrast on dark icon colors. For icons that carry meaning, check the face color against the background at 3:1.