Iconography

The system in one sentence

Interzo icons are thin, rounded outlines that point to what a word already says: an amenity, a service, a place, an action. They guide the eye; the text carries the meaning.

The library

The set is built on Lucide, an open-source icon library released under the ISC License. Lucide icons are drawn on a 24 × 24 grid with a single continuous line, round ends and round corners, which gives the set the same calm, even line as the rest of the brand.

Interzo does not draw icons from scratch and does not mix libraries. Every icon on the website comes from Lucide, at the version the site ships, with one change: the stroke is lighter than Lucide’s default, so icons sit quietly next to Geist Light text.

The Interzo set

Sixty-nine icons cover everything the website needs today, grouped by the part of the experience they belong to.

When a new screen needs an icon, pick it from Lucide first and add it to this set, following the rules on this page. If Lucide has no single icon for an idea, two Lucide icons can be combined, as the site does for “explore stays”: a house with a magnifier. A new drawing in another style is never the answer.

Anatomy

All icons share one construction. The line is the same weight along its whole length, every end and corner is round, and nothing is filled. Interzo uses a single style: there are no filled, duotone or two-color versions of the set.

Size and stroke

Icons appear at a handful of sizes, and the stroke changes with them: the larger the icon, the lighter the line. That keeps the drawn line at a similar weight on screen whether the icon is a small check in a chip or a feature icon on a card.

Inline with text, an icon matches the size of the text it sits with: 16 px next to body copy and inside buttons, 20 px in lists and detail rows. Within one group, such as a list of amenities, all icons share the same size and stroke.

Color

Icons take one color, inherited from their context. The system uses four treatments.

Garnet never colors an icon on its own. It appears only when the whole element is an action, such as the active pin on a map, where the pin turns garnet and the icon inside stays paper.

Usage principles

Always with a word. An icon reinforces a label; it does not replace it. Amenities, services, contact details and steps always show their name next to the icon.

Icon-only controls are the exception. Universal controls (close, arrows, previous and next, pagination, plus and minus) can appear without visible text, and each one carries an accessible name such as “Next page” for screen readers.

Decorative icons are hidden from assistive technology. When an icon sits next to its label, the label is what gets read; the icon is marked as decorative.

The arrow means “go”. Buttons and links that take the visitor to another page end with an up-right arrow, sized to the text. Back and forward inside carousels use plain left and right arrows.

Correct and incorrect use

Download

The SVG files are exported from Lucide at the version the website uses, with the Interzo stroke. They use currentColor, so they take the color of the text around them in any tool that supports it. The package includes the Lucide license.