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.
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.
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.
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
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.