Carlotta Govi

Building a “bottle” icon ✨

Firefox Icon System 🦊 — To maintain a proper visual balance, we use a 1.5px stroke for all 16px icons. If a stroke is uneven, we align it to the pixel grid on one side 📐

16px icon previews from our @firefox Icon System library. We intentionally apply 1.5px strokes to maintain visual uniformity across icons of the same size 🦊 ✨

Here’s a sneak peek at our @firefox icon library, featuring over 700 visual symbols in 6 grid sizes. Inspired by details from our typeface, this icon system is built on design and production guidelines to ensure visual consistency and proper formatting 🦊✨

@alvarostudio_ @amazon 💛

@CarlottaGovi @amazon Obsessed with this

Designing icons at scale: here’s a glimpse of our @amazon OIC icon system 📐✨ #designsystem

In our adidas Runtastic iconography, we systematically use 45° angles to ensure smooth anti-aliasing. For some symbols, we apply 15° increments to vary the angles while maintaining visual harmony and consistency 📐✨ #designsystem #icondesign

Here’s a sneak peek at our Firefox icon library, featuring over 600 visual symbols in 14 sizes. Inspired by details from our typeface, this icon system is built on design and production guidelines to ensure visual consistency and proper formatting 🦊✨

A few icons from our Firefox Icon System, designed on a 20px grid with a 1.5px line weight: Music Note, Travel Bag, Book, Palette, Game Controller, Leaf, Heart 🦊✨

Unfamiliar icons require familiar text labels; few icons are universally understood across cultures and contexts 🌎

Rain icon from our @adidas Runtastic icon system (32x32 px grid) 🌧️ ☂️

Here’s a little sneak peek at our Firefox icon system design guidelines. These visual rules cover style, base grid, key shapes, metrics, and sizing, along with recommended practices and things to avoid (do’s and don’ts) 📐✨

Some visual rules from our @adidas Runtastic pictogram system — showing how the logomark and pictogram angles are related. Examples include Skateboarding, Skating, and Tennis.

Our @firefox icon system uses a base counter-stroke size of 1.5px, which is systematically increased or decreased by 0.5px as needed 📐✨ 1. Counter stroke 1.5px 2. Counter stroke 2px

@msllrs @mozilla @firefox Thank you!

@CarlottaGovi @mozilla @firefox congrats. look forward to seeing what you create together!

I'm excited to share that I'll continue partnering with the amazing @Mozilla @firefox team this year! We're set to work on scaling and enhancing our icon system 🦊 ✨

Building a “book” icon for the Firefox icon system 🦊 ✨

Here's a preview of our @firefox icons 🦊 expanding the system with new designs that follow our key visual guidelines.

Simplenote icon system re-design 📐with the splendid product design team at Automattic ✨ Simplenote is a note-taking application with markdown support. In addition to cross-platform apps, it can be accessed via most web browsers.

In our #adidas Runtastic icon system, icons are placed at the center of their grid to ensure they stay aligned when placed next to each other in our designs. Whenever feasible, icons are precisely centered within their grid boundaries. However, sometimes we use optical alignment strategies, positioning icons to visually appear centered within the grid — this means they might not always be perfectly centered mathematically, but they look centered to the human eye 📐✨