Icon Grid Block

Icon Grid Block arranges a set of image-based icons or logos in a responsive grid or continuous marquee. The live block above uses four existing LunaSites assets in the real Icon Grid Block.

Icon Grid also works well for client, partner, certification, or technology logos. Its responsive layout follows the selected grid settings: column counts, gaps, and item sizing adapt at each breakpoint, so verify wrapping and logo legibility on tablet and mobile.

Properties

Properties manages the media items, responsive grid density, spacing, optional auto-scroll, and item sizing.

Icons

Add, reorder, replace, or remove image items. Each item can carry alternative text and an optional link that may open in a new tab.

Columns and gap

Set Columns and Gap for desktop, tablet, and mobile. These controls are used when Auto Scroll is off; the demo uses four desktop columns and two columns at narrower breakpoints.

Auto Scroll

Auto Scroll switches the block to a continuous single-row marquee. Choose left, right, up, or down and set Duration in seconds; a higher duration produces slower movement.

Item and icon height

Item Height controls the inline item box. Icon Max Height has desktop, tablet, and mobile values and limits the visible media without forcing every source to the same intrinsic aspect ratio.

Layout

Icon Grid is content-driven and starts at 12 columns by 4 rows in a section. Begin compact, then let the real number of items, columns, gaps, and media dimensions determine whether more height is needed.

Behavior

When Auto Scroll is off, the responsive column counts define wrapping. When it is on, direction, duration, gaps, and max icon heights control the marquee. Linked items must retain understandable focus and destination behavior.

Style Panel

The Style Panel separates the overall grid surface from the appearance of its media items.

Container

Container supports spacing, background, borders, and effects in Default and Hover states. Keep the grid’s outer surface distinct from the item imagery.

Icons

Icons exposes original or recolored media treatment and hover transforms while hiding irrelevant text typography controls.

Motion

The block supports standard entrance effects. Auto Scroll is continuous behavior rather than entrance motion; provide a calm duration and avoid combining it with distracting block motion.

Property summary

• Icons — ordered media items with alt text and optional links.

• Columns and Gap — responsive grid density when Auto Scroll is off.

• Auto Scroll, Direction, and Duration — marquee behavior.

• Item Height — inline item box size.

• Icon Max Height — responsive media limit.

• Animation Effects — entrance motion.

Responsive behavior

Use fewer columns and smaller max heights at narrower breakpoints.

Check the height audit after the media settle; reduce any content-driven frame that has material empty space.

Verify linked items, wrapping, and marquee overflow at 1440px, 991px, and 375px.

Accessibility

• Give meaningful logos or icons accurate alt text; use empty alt text only for truly decorative repetition.

• Keep linked items keyboard reachable with visible focus.

• Avoid continuous motion that cannot be paused when it becomes distracting.

• Do not communicate a brand or category only through color.

Best practices

• Use consistent source quality and similar visual weight across items.

• Set responsive columns before fine-tuning gaps and max heights.

• Keep auto-scroll slow enough for recognition and test the longest realistic item set.

Common mistakes

• Mixing unrelated aspect ratios without checking balance.

• Using five mobile columns because it is the default.

• Enabling auto-scroll with a short, distracting duration.

• Leaving duplicate or inaccurate alt text.

• Keeping a four-row content-driven frame when the rendered grid needs much less or more.

Quick recipe

Add Icon Grid to a compact section, insert and label the media items, set desktop, tablet, and mobile columns and gaps, choose static wrapping or a restrained marquee, cap icon heights, style Container and Icons, then verify height and overflow at all three breakpoints.