Here at ZURB, we created these icons with specific standards which gives a cohesive voice and style to develop an amazing font set for everyone to love, enjoy and use on their website. Some standards includes:

Geometric All icons are made with basic shapes like triangles, squares, rectangles and circles.

Round Corners All icons are made with rounded corners to give the icons a softer and more approachable feel.

Thick Line Weights All icons opt for a thicker line weight as opposed to thin lines so that the icons could be scalable, as well give it the friendly look we're going for.

Natural Angles We've given these specific rotation degrees to maintain the consistency as a set.

Scalable When creating these icons, we are thoughtful with how these icons would scale at small and large sizes.

After converting these vector icons into a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need which could be customized and stylized via CSS.

How to use them

We've made it super easy for you to get going with these icons! Just download the font and follow these simple instructions. You'll be rockin’ in no time.

Merge in the styles

It's really easy to hook up the pack's stylesheets to bring your new icon web font to life. When you download the fonts, you'll be able to simply merge the foundation-icons.css and foundation-icons.[eot/ttf/svg/woff] files straight into Foundation.

Write your markup

We've used an <i> for icon elements. You just simply apply the appropriate classes that match the icon you want to use. Here's what the markup looks like:

Check out other Playground experiments

Get started with finishing

Team up with our designers to see how our iterative design process can get your project going. Equipped with our Progressive Design process, visual skills, and the coding chops that brought you Foundation, ZURB Studios is ready to jump in and get your product out to the masses!