🦊 📐 Some of the latest icons from our Firefox icon system. We've been working to expand our system with over 300 icons — new icons and sizes are based on the key visual rules I helped define last year.

Key shapes, consistently sized according to our #Firefox icon system rules. These shapes serve to establish visual connections between icons with similar proportions 📐✨

Building an '@' icon 📩

Some icons from the #adidas Runtastic icon system 📐 Key icons are drawn on a pixel-based grid of 32px x 32px. Some of these are currently featured in adidas Running and adidas Training apps 📱🏃

Bike icon 🚴✨ from the Visit Luxembourg Icon System. A while ago, I helped the Government of Luxembourg design a new icon system for their Visit Luxembourg mobile app.

How to build a “side face” icon 📐✨

Recurring icon shapes 📐✨ In our #adidas Runtastic icon system, we use existing shapes and elements systematically.

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

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.

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

adidas Runtastic pictograms are designed to visually connect with the adidas logo. Each pictogram presents 30° angles and depending on the icon metaphor, we use increments of 15° for other types of angles 📐

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

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 🦊 ✨

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

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

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) 📐✨

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

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

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 🦊✨

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 🦊✨