Icon Block

Icon Block adds a single decorative symbol with responsive alignment and an optional background shape. The live block above is the real Icon Block, centered in a compact content-driven frame.

Properties

Properties controls the glyph, its visual treatment, and breakpoint-specific alignment.

[REVIEW] ADD PHOTO WITTH THE ICONS TO CHOOSE FROM

Icon

Choose a glyph from the icon picker. Use a familiar symbol and pair it with nearby text whenever its meaning is not universally clear.

Icon Style

Filled creates a solid glyph; Outline uses a line treatment. Select the variant that stays legible at the final size and against the effective background.

Background Shape

None, Circle, Square, and Rounded define the optional icon backdrop. A shape becomes visible when a background color is applied through the Style Panel.

Layout

Icon is content-driven and starts compact at 2 columns by 2 rows. Horizontal and vertical alignment can be set for desktop, tablet, and mobile. The demo spans the article width but keeps only a two-row content frame.

Behavior

The block is decorative and has no native click action. Alignment overrides inherit from desktop to tablet to mobile until a breakpoint-specific value is set.

Style Panel

The Style Panel separates the glyph, its optional shape, and the surrounding container so each surface can be styled deliberately.

Icon

Icon supports background and border controls in Default and Hover states. Radius and border style are intentionally constrained for a clean glyph treatment.

Background

Background controls the optional shape behind the glyph, including background, borders, effects, and hover transition settings.

Container Background

Container Background controls spacing and the outer block surface. Keep this area compact so it does not become accidental section whitespace.

Motion

Use entrance motion only when the icon supports hierarchy. Hover animation belongs to the supported Style Panel target and must not be the only signal of meaning.

Property summary

• Icon — glyph selected from the picker.

• Icon Style — Filled or Outline.

• Background Shape — None, Circle, Square, or Rounded.

• Horizontal and Vertical Alignment — responsive desktop, tablet, and mobile placement.

• Animation Effects — entrance motion for the block.

Responsive behavior

Tablet and mobile alignment inherit until explicitly overridden.

Because Icon is content-driven, compare the rendered height with the authored frame and persist a smaller frame when it is materially oversized.

Accessibility

• Treat purely decorative icons as supporting visuals, never the only carrier of a label or status.

• Keep sufficient contrast between glyph, shape, and page background.

• Do not rely on color or icon shape alone to communicate meaning.

Best practices

• Use one visual metaphor consistently across the interface.

• Match Filled or Outline treatment to the surrounding icon system.

• Keep the frame, padding, and hover response proportional to the glyph.

Common mistakes

• Using an unfamiliar glyph without nearby explanatory text.

• Adding a background shape without enough contrast.

• Leaving a two-row icon inside an oversized section.

• Changing alignment per breakpoint without checking reading order.

• Using hover alone to reveal meaning.

Quick recipe

Add Icon to a compact section, choose the glyph and Filled or Outline treatment, add a background shape only if needed, set responsive alignment, style the supported areas, then verify its frame and contrast at all three breakpoints.