# Icon Block

A practical guide to the LunaSites Icon block: decorative icons with optional background, configure its real settings, style supported areas, and verify responsive and accessible behavior.

# 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

![Icon Properties panel with picker, appearance, shape, and layout controls in a clear retina documentation capture](https://lunasites.io/api/luna-gallery/1785682620175-epzkbr-retina3-icon-01-properties.png/@@images/image)

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

![Icon Style Panel with responsive default and hover controls in a clear retina documentation capture](https://lunasites.io/api/luna-gallery/1785682641278-3cw5gn-retina3-icon-02-style.png/@@images/image)

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.