Foundation Icon Fonts 2!

There's a new version of these fonts!

We put together a new icon font with a more consistent look and a ton of new icons.

Get the New Foundation Icons

Custom icon sets that are stored in a handy web font and are coded to be more accessible. A couple lines of CSS and the right markup will get you going in no time.

We designed the glyphs to be refined enough to stand alone as a simple icon, but left room for the imagination. Since you’ll be dealing with a font, the opportunities are nearly limitless. Now your icons can be any size, any color and any style available in CSS. With this release comes an entirely new set of accessibility icons and some refinements to the old ones!

  • settings

  • heart

  • star

  • plus

  • minus

  • checkmark

  • remove

  • mail

  • calendar

  • page

  • tools

  • globe

  • cloud

  • error

  • right-arrow

  • left-arrow

  • up-arrow

  • down-arrow

  • trash

  • add-doc

  • edit

  • lock

  • unlock

  • refresh

  • paper-clip

  • video

  • photo

  • graph

  • idea

  • mic

  • cart

  • address-book

  • compass

  • flag

  • location

  • clock

  • folder

  • inbox

  • website

  • smiley

  • search

  • phone

General Enclosed Set

  • settings

  • heart

  • star

  • plus

  • minus

  • checkmark

  • remove

  • mail

  • calendar

  • page

  • tools

  • globe

  • cloud

  • error

  • right-arrow

  • left-arrow

  • up-arrow

  • down-arrow

  • trash

  • add-doc

  • edit

  • lock

  • unlock

  • refresh

  • paper-clip

  • video

  • photo

  • graph

  • idea

  • mic

  • cart

  • address-book

  • compass

  • flag

  • location

  • clock

  • folder

  • inbox

  • website

  • smiley

  • search

  • phone

Social Set

Accessibility Set

  • wheelchair

  • speaker

  • fontsize

  • eject

  • view-mode

  • eyeball

  • asl

  • person

  • question

  • adult

  • child

  • glasses

  • cc

  • blind

  • braille

  • iphone-home

  • w3c

  • css

  • key

  • hearing-impaired

  • male

  • female

  • network

  • guidedog

  • universal-access

  • elevator

How These Were Built

Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. We thought it would be extremely useful to have access to icons without the need to save many versions or sizes for a single site. By using a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need.

How to Use Them

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

Download the Font Pack

First things first, get your mouse pointer over here and download the font sets or choose a specific font from the download area in the sidebar. →

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 stylesheets and fonts folders straight into Foundation. If you are using Sass, we've got .scss files for you! Here's what the CSS looks like:

@font-face {
  font-family: '[set]Foundicons';
  src: url('fonts/[set]_foundicons.eot');
  src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
       url('fonts/[set]_foundicons.woff') format('woff'),
       url('fonts/[set]_foundicons.ttf') format('truetype'),
       url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class*="foundicon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
}
 
[class*="foundicon-"]:before {
  font-family: "[set]Foundicons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}

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:

Using More Than One?

If you want to include more than one font on a site, you can simply chain a class to it that will apply the appropriate font-family. View an example on GitHub.

<i class="foundicon-[icon]"></i>

Style Away!

You can use some awesome CSS techniques to start exploring different styles. We've come up with a few ourselves, check them out:

Score an awesome product engineering or design job

via Job Board from ZURB

Download the Fonts

We've put together some handy-dandy download packs that will easily fit right into your Foundation project!

Download All Sets

Or you can choose a specific set here:

Try Foundation

If you haven't given Foundation a try, we highly recommend it. You'll be coding faster and better in no time!

Visit Foundation

Available on GitHub

We've put these Icons on Github to make maintenance and issue tracking as easy as possible. You can also pop it open right in GitHub for Mac here.

Thoughts?

Hop on over to the blog post to see what others are saying or to let us know what you think.

Looking for the old set?

We've depricated the old version of the icons because the implementation wasn't very accessible. If you'd still like access to them, you can get them on Github.


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×