Multi-weight SVG icons.

Finding the right icon set for a project can be time consuming. You may stumble across a few icons that work well, but the remainder of the set isn't the right style or is missing critical icons. Plus, on the next project, you have to start the process all over.

Pro fonts are designed with multiple weights. Why not icons?

The weight or stroke of the icon is important. Pairing a thin font-face with a thick-icon probably won't look right. The reality is, both fonts and icons are a major component of a design system, and they should harmonize with each other.

A style for any font

Most icon sets do not pair well with fonts of different strokes and weights. Morpho solves this with 6 sets of multi-weight SVGs icons. I designed for extremes of thick and thin, while also creating meaningful differentiation across the 6 sets.

Paired with font Playfair Black

Morpho Ultra Icons

Paired with font Lato Thin

Morpho Thin Icons

Start with a Grid

My creative challenge: how do I make the icon equivalent of Helvetica? Even better, of Avant Garde, with unopinionated shapes and geometric simplicity? My thinking: simple geometry will appeal to the needs of most projects. And that required a strict adherence to a Vitruvian-like grid.

The grid + a few rules
Simple geometry

Focus on Basic UI Needs

Certain icons are go-to in any project, and most have to do with navigation. Menu, search, arrows, close. Secondary icons pertain to application design. Plus, minus, chart, eye, edit. Sprinkle in some bullet styles for lists and I had a core set.

Just the basics at first.

Throw in a Dash of CSS

With a little bit of code, the icons can be pulled into a project via CSS style sheet and displayed as background images. Alternately, they can be referenced directly within the code. Win-win.

img { 
    border-style: none; }

.morpho-icon-base, {
  display: inline-block;
  line-height: 0;
  background-repeat: no-repeat;
  background-size: contain; }

.morpho-icon-arrow-left-thin {
  background-image: url(../img/icons/thin/arrow-thin.svg); }

.morpho-icon-15 {
  width: 1.65rem;
  height: 1.65rem; }

.evo-icon-rotate-90 {
  transform: rotate(90deg); }

Finally a Name and Wordmark

Because a name gives it life.

Over 500 icons

I continue to evolve this icon set, with a personal goal of hitting 1,000 by next year. Morpho adapts to various brands and font pairs with ease. A must-have for agencies and corporate in-house teams.

I'm also intrigued by other font-icon marriage challenges, like taking a variable stroke font like Playfair Black (shown and linked to above) and trying a variable stroke icon set to match. I love to get geeky with this stuff. If you do too, please ask me to get a coffee. I need more friends.