Apply for Mapa Sustina
Apply for Mapa Sustina
Editor's Picks

Sustina Icon System

Sixteen icons and three brand marks are now standard SVG.

The brand marks

The Rufous. Sustina’s emblem.

Secondary Logo. Combines the Rufous icon with the wordmark.

Certification Badge. The mark of recognition for businesses that have undergone a Sustina Certification.

The Rufous · rufous.svg

Secondary Logo · secondary-logo.svg

Certification Badge · certification-badge.svg

The animated lockup

The secondary logo can assemble itself: the perch line grows from center, the Rufous rises out of it and bounces into place, then bird and line glide left as the wordmark emerges from beneath him. Usage is triggered once per page view on About page hero.

The sixteen icons

Standard width, natural heights, line width = icon width. Left-aligned icons sit flush. Hover tints by pillar or category color.

Insight

Inclusion

Innovation

Impact

Environment

Social

Governance

Foresight

Resilience

Adaptive Sustainability Transformation Program

Strategic Intelligence & Advisory

Capacity Building

Reporting, Storytelling & Design

Emerging Issues Hub

Publishing Fund

Sustina Magazine

Lift + line grow

Lift + line grow

Slow spin (rotational marks)

Slow spin (rotational marks)

Entrance animation

Every icon enters with its own choreography, built from its shapes. Each can play once as the section scrolls into view or triggered by hover — click any icon to replay it alone, or use the replay button.

On dark backgrounds

Sustina Magazine

Foresight

Insight

The Rufous

Usage rules

  • Made to be used at a standard max-width with natural height
  • colored through currentColor — one file covers black, white, and every pillar color.
  • The icon line is rendered in CSS and automatically matches each mark’s true width. 
  • One standard width per context (84px in cards, 44px inline); height falls naturally — never stretch.
  • Icon line via CSS (height ≈ 8% of width, radius half the height, gap ≈ 12% of width), width matching the mark. 
  • Color only via currentColor: ink #111 on Light, cream #FFFDF5 on dark, pillar colors on hover/active.
  • Files live in /wp-content/uploads/sustina-icons/; square raster fallbacks in the brand folder’s Masters/ for platforms that need fixed boxes.