Portal Bonito

Icon system design

Designing a custom icon system to translate unique local fauna and culture into functional UI assets.

An updated visual identity to accompany a company’s SaaS as it joins the web ecosystem.

Bonito, Mato Grosso do Sul, is one of Brazil’s most popular eco-tourism destinations, operating under a strict “voucher system” that requires every tour to be booked in advance. Portal Bonito is a voluntary, non-profit initiative that serves as a central hub for this ecosystem, allowing tourists to discover and compare tour and activity options.

Because of the strict regulations, every tour must include logistical details, from mandatory equipment like neoprene suits to specific accessibility infrastructure. Relying on text descriptions slowed down readability, and standard icon libraries (like Google’s Material Design) weren’t specific enough to the region’s needs and biodiversity.

Core objectives:

Design a custom library of 103 icons to replace text-heavy descriptions and standard, generic icon sets.

Develop a visual style that is legible at small sizes (24px), while maintaining a friendly, organic aesthetic that matches the region’s personality and the rest of the interface.

Create specific visual metaphors for the region’s unique wildlife (e.g., Maned Wolf, Toucan) and specialized equipment.

Systematize the library into 18 clear categories to cover all aspects of the tourist experience, from infrastructure to “what to bring”.

Creating a simple, yet culturally authentic icon system

To manage the scope of 103 unique assets, I employed a strict visual system designed to balance technical constraints with the friendly, organic nature of the region.

THE FUNCTIONAL SCOPE

The client defined a comprehensive structure of 18 categories divided into three functional types:

Infrastructure: icons indicating site amenities (e.g,. Accessibility, Wi-Fi).

Included items: icons representing tours and specific activities.

What to bring: guidance for user preparation.

Because these icons appear in a dense “icon + label” layout, often on mobile devices, visual clarity was fundamental.

THE VISUAL SYSTEM

The entire library was designed on a 24px grid with 2px padding to ensure great legibility at small sizes. I defined a set of rules to maintain consistency across the set:

1px stroke width: I chose a thin, 1px outline style. This specific weight was chosen to harmonize with the website’s typography, neither too thin to be invisible nor too thick to overpower the text labels.

Friendly geometry: To avoid a cold, rigid feel, I applied a 1px border radius to corners and terminals. This subtle rounding creates a softer, more inviting aesthetic that is suited for an eco-tourism destination.

High contrast: all icons were designed as black outlines to ensure maximum contrast and readability against the interface.

CRAFTING LOCAL IDENTITY

The biggest challenge was translating Bonito’s culture into such a small-sized icon system. Generic libraries were insufficient for the region’s specificities, so I had to illustrate unique local concepts that standard sets simply don’t have, such as:

Cultural specifics: icons for a traditional “Brazilian wood stove lunch” (almoço no fogão a lenha) and “pedal boats” (pedalinho).

Local wildlife: instead of generic animal symbols, I illustrated the specific fauna of the region. For example, the “Wildlife spotting” icon features a Maned Wolf, while the “Birdwatching” icon features the Toucan, which also echoes the website’s logo, bringing a distinct sense of place to a functional UI asset.

Impact and project takeaways

The icon system successfully bridged the gap between utility and identity. By replacing text-heavy lists with clear, visual cues, the icons reduced the cognitive load for users comparing complex tour details, making the booking process faster and more intuitive. Furthermore, the inclusion of specific local fauna and cultural items reinforced Portal Bonito’s brand as a champion of local culture.

Personal takeaways

This project was a deep dive into simplification and scale. The core challenge was figuring out how to represent unique concepts in their simplest forms without losing their identity, all within a realistic timeline. It taught me that defined guidelines are not constraints, but very helpful tools for maintaining consistency and clarity when managing a large volume of deliverables.

NEXT PROJECT

Alkasoft

Brand identity design and application

A refreshed brand identity to mark the release of the newest version of a legal management software, across all of its digital touchpoints.

NEXT PROJECT

Alkasoft

Brand identity design and application

A refreshed brand identity to mark the release of the newest version of a legal management software, across all of its digital touchpoints.

About me

My work