Icon styling

Icon styling

1. Description

Once an icon glyph is chosen from the icon picker*link to elements page*, the Icon property controls how that glyph is rendered on the page: Each subproperty defines:

  1. Size - How large the glyph appears
  2. Style - Whether it is drawn as an outline or a filled solid shape
  3. Color - The color of the glyph's strokes or filled area.

Together these three controls let you match the icon's weight and tone to the surrounding content.

. 

2. Possible values

  1. Size - A numeric value in px selected from the size dropdown. This determines the glyph's rendered dimensions. While smaller values are ideal for inline icons, supporting labels, larger values cater to hero icons, feature highlights, and empty state illustrations.
NotesNote: The available options to choose from for the size of an icon range from 8 to 72 pixels.

Style - Icon style controls whether the icon glyph is rendered as a stroked outline or a solid filled shape.

OptionDescription
OutlineThe icon is rendered with stroked lines only and the interior of the glyph is transparent.

Ideal for: When a lighter, more refined visual weight is needed. Common for secondary actions, navigation icons, and informational indicators.

SolidThe icon is rendered as a fully filled shape.

Ideal for: When a stronger, more prominent visual weight is needed. Common for primary actions, active states, and icons that need to stand out clearly.

Color - A color value applied to the icon glyph, both the strokes (Outline) and the fill (Solid), selected from the color picker.

OptionDescription
StandardPick from Document Colors, Standard colors, or Monochrome colors.
CustomEnter a hex or RGB code directly for a precise color value.

3. How to set icon properties?

  1. Select an icon element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Icon accordion within the pane.
  3. Set icon size:
    1. Click the size dropdown on the left and select the desired px value from the options ranging from 8 to 72 pixels.
  4. Set icon style:
    1. Click the style dropdown on the right and select Outline or Solid.
  5. Set icon color:
    1. Click the color swatch in the color field below to open the color picker.
      1. Standard tab: You can choose from Document Colors, Standard colors, or Monochrome colors.
      2. Custom tab: You can enter a hex or RGB code directly.
  6. Click Save in the top right corner to ensure the changes are retained.

4. Applicable elements

The Icon styling property is available only for the following element:

  1. Icon

5. Points to note

  1. Icon glyph selection The glyph itself is chosen from the icon picker when the Icon element is first placed on the designer after which it can be styled.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Corner Radius
  8. Border
  9. Shadow
  10. Opacity
  11. Tab styling
  12. Stack styling