Components
Tile
A tile is a compact, usually square block in a tight grid, holding one logo, icon, stat or image, scanned as part of a set rather than alone.
- Also called
- Grid tile, Logo tile, Icon tile, Integration tile
- Spotted on
- 210 of 422 homepages
- Browse examples
- Logo clouds →
What is a tile?
Tiles are how SaaS sites show many small things at once. An integrations section is a grid of logo tiles, as with Short's twelve integration tiles including Zapier and Slack. A customer section can be a wall of logo tiles, as on Warp, where one photo tile mixes in a "10x" result. Stats bands use metric tiles with a number and a label.
Because tiles are small and uniform, the set carries the message more than any single tile does: "we connect to everything", "these companies trust us". That makes consistency essential. Logos should be normalized to the same visual weight, icons drawn in one style, and the grid gap kept even.
Tiles turn weak when they are asked to carry paragraphs. Once a tile has a heading, two lines of copy and a link, it has become a card, and should be given card spacing. Equally, a grid of tiles with a few real logos and many placeholders shows exactly how thin the set is.
Tile examples from real SaaS sites
Each one is a hero capture whose design review mentions the tile.
When to use a tile, and when not to
Use it for
- Large setsDozens of integrations, customers or capabilities that should register as a whole.
- One fact per itemEach item is fully described by a logo, an icon or a number.
- Dense layoutsSpace is tight and items must sit edge to edge without padding-heavy cards.
Avoid it for
- ExplanationsItems that need a sentence or more should be cards.
- Two or three itemsA few logos read better in a single line than in a grid.
- Unequal importanceIf one item matters most, give it its own space instead of an identical tile.
Anatomy of a tile
- 1ContainerA square or near-square block, often with a light border or tint.
- 2ContentOne logo, icon, number or image, centered.
- 3CaptionAn optional one- or two-word name below the content.
- 4Hover stateOptional lift or tooltip with a short description or link.
Common tile variants
1. Integration tile
A partner logo in a grid, often linking to an integration page.
2. Logo tile
A customer logo in a bordered grid cell.
3. Stat tile
A big number with a short label.
4. Icon tile
An icon and one-word caption for a capability.
Spotted in our design reviews
Our reviews describe a tile on 210 of the 422 SaaS homepages in the catalog. A few of them:
Below a row of five stars and a Product Hunt badge, a panel headed "Scanning demo-store.com" shows a visibility score of 89 and four stat tiles.
Seorce · Above the fold
A white card for "yourproject.com" tagged "Frontend" holds three thumbnails, beside a GitHub tile showing "268" contribs and a two-by-two grid of X, LinkedIn, Discord and TikTok icons.
0cred · Above the fold
On the right, an "Installation Method" card with "Human" and "Agent" toggles sits above four small call-status tiles.
Pollyreach · Above the fold
One white "Book a demo" button follows the grey subcopy, and a floating video tile overlaps the bottom right corner.
V7labs · Above the fold
The bordered screenshot below shows a report whose text ends "Awareness is 27% below competitor average." above four stat tiles.
Timelaps · Above the fold
The copy occupies a narrow left column, and the right side is white space except a small tile reading "Video layer for work".
Usevelo · Above the fold
A header carries the tilted J logo tile and the "June" wordmark, then five links: "Product" and "Content" with chevrons, plus "Customers", "Pricing" and "Changelog".
June · Navigation and letter opening
On the right, six capsule shapes cluster around an "ASK FATHOM" tile, the astronaut and a moon.
Fathom · Announcement bar, header and hero
Often confused with
Tile vs. card
A card holds a heading, copy and often an action. A tile holds one thing (a logo, an icon, a number) and is read as part of a set.
Tile vs. logo cloud
A logo cloud is the section; logo tiles are one way to lay it out, with each logo boxed in a grid cell.
Tile vs. bento grid
A bento grid mixes cells of different sizes, each a mini feature. Tiles are uniform and small.
Frequently asked
How many integration tiles should a homepage show?
Enough to fill two or three rows and prove breadth, typically 12-24, with a link to the full directory. Showing every integration on the homepage rarely helps.
Should logo tiles have borders?
Borders help when logos vary a lot in shape, since the grid keeps them aligned. On minimal pages, an unbordered grid with even spacing looks cleaner.