Icons

At a bare minimum you'll want to include PDF's images for light mode icons so they can be used for all views where your Component appears within the RapidWeaver Elements UI.

Standard Icon

All Elements require this icon.

  • icon.pdf (Required), 1:1 ratio, e.g. 128x128 (Square)

  • icon-dark.pdf (optional), 1:1 ratio, e.g. 128x128 (Square)

Palette Icons

The Palette image should be named paletteIcon.pdf and paletteIcon-dark.pdf if you'd also like to display a different version in dark mode.

  • paletteIcon.png (Required), 1:2 ratio, e.g. 128x256 (landscape)

  • paletteIcon-dark.png (optional), 1:2 ratio, e.g. 128x256 (landscape)

Sketch Example File

Your pdf icons should be on a transaparent background.

We've provided an example Sketch document below you can use to get started.

We also offer experimental support for banner style icons, these are great for layout style components. However, this style of icon may not be supported when Elements ships, please use with caution and ensure you also include the standard style of icon.

  • bannerLayer1.png

  • bannerLayer1-Dark.png (optional)

Banner icons can be layered, and each layer can represent a different colour in the Theme Studio. For example this icon uses four layers and three of those layers will be tinted with the Theme colour.

  • bannerLayer1.png

  • bannerLayer2-primary-500.png

  • bannerLayer3-primary-200.png

  • bannerLayer4-secondary-500.png

Banner images should be 512px in width, but can be as short or tall as you need.

List View Icon (Standard Icon)

Grid View (Pallete Icon)

Grid and List View (Banner Icon)

Banner icons will appear the same in both grid and list.

Asset Placement

All Icon files should be placed at the root of the Element alongside the info.json file.

Last updated

We are Realmac Software. We make nice things.