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.

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!

General 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

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

thumb-up
thumb-down
rss
facebook
twitter
pinterest
github
path
linkedin
dribbble
stumble-upon
behance
reddit
google-plus
youtube
vimeo
clickr
slideshare
picasa
skype
instagram
foursquare
delicious
chat
torso
tumblr
video-chat
digg
wordpress

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.