Foundation Icon Fonts 3

Customize your icons to be any size, color, style in CSS

Download the Font
Use 283 icons with 1 font

A custom collection of 283 icons that are stored in a handy web font.
View All Icons »

Style 'em with CSS

A couple lines of CSS and the right markup will get you going in no time.
How to Use Them »

Create infinite variations

Easily customize these icons to be any size, color and style in CSS.
View Samples »

  • heart

  • star

  • plus

  • minus

  • x

  • check

  • upload

  • download

  • widget

  • marker

  • refresh

  • home

  • trash

  • paperclip

  • lock

  • unlock

  • calendar

  • cloud

  • magnifying-glass

  • zoom-out

  • zoom-in

  • wrench

  • rss

  • share

  • flag

  • list-thumbnails

  • list

  • thumbnails

  • annotate

  • folder

  • folder-lock

  • folder-add

  • clock

  • play-video

  • crop

  • archive

  • pencil

  • graph-trend

  • graph-bar

  • graph-horizontal

  • graph-pie

  • checkbox

  • minus-circle

  • x-circle

  • eye

  • database

  • results

  • results-demographics

  • like

  • dislike

  • upload-cloud

  • camera

  • alert

  • bookmark

  • contrast

  • mail

  • video

  • telephone

  • comment

  • comment-video

  • comment-quotes

  • comment-minus

  • comments

  • microphone

  • megaphone

  • sound

  • address-book

  • bluetooth

  • html5

  • css3

  • layout

  • web

  • foundation

  • page

  • page-csv

  • page-doc

  • page-pdf

  • page-export

  • page-export-csv

  • page-export-doc

  • page-export-pdf

  • page-add

  • page-remove

  • page-delete

  • page-edit

  • page-search

  • page-copy

  • page-filled

  • page-multiple

  • arrow-up

  • arrow-right

  • arrow-down

  • arrow-left

  • arrows-out

  • arrows-in

  • arrows-expand

  • arrows-compress

  • torso

  • torso-female

  • torsos

  • torsos-female-male

  • torsos-male-female

  • torsos-all

  • torsos-all-female

  • torso-business

  • monitor

  • laptop

  • tablet-portrait

  • tablet-landscape

  • mobile

  • mobile-signal

  • usb

  • bold

  • italic

  • underline

  • strike

  • text-color

  • background-color

  • superscript

  • subscript

  • align-left

  • align-center

  • align-right

  • align-justify

  • list-numbered

  • list-bullet

  • indent-more

  • indent-less

  • print

  • save

  • photo

  • filter

  • paint-bucket

  • link

  • unlink

  • quote

  • play

  • stop

  • pause

  • previous

  • rewind

  • fast-forward

  • next

  • record

  • play-circle

  • volume-none

  • volume

  • volume-strike

  • loop

  • shuffle

  • eject

  • rewind-ten

  • dollar

  • euro

  • pound

  • yen

  • bitcoin

  • bitcoin-circle

  • credit-card

  • shopping-cart

  • burst

  • burst-new

  • burst-sale

  • paypal

  • price-tag

  • pricetag-multiple

  • shopping-bag

  • dollar-bill

  • wheelchair

  • braille

  • closed-caption

  • blind

  • asl

  • hearing-aid

  • guide-dog

  • universal-access

  • telephone-accessible

  • elevator

  • male

  • female

  • male-female

  • male-symbol

  • female-symbol

  • social-500px

  • social-adobe

  • social-amazon

  • social-android

  • social-apple

  • social-behance

  • social-bing

  • social-blogger

  • social-delicious

  • social-designer-news

  • social-deviant-art

  • social-digg

  • social-dribbble

  • social-drive

  • social-dropbox

  • social-evernote

  • social-facebook

  • social-flickr

  • social-forrst

  • social-foursquare

  • social-game-center

  • social-github

  • social-google-plus

  • social-hacker-news

  • social-hi5

  • social-instagram

  • social-joomla

  • social-lastfm

  • social-linkedin

  • social-medium

  • social-myspace

  • social-orkut

  • social-path

  • social-picasa

  • social-pinterest

  • social-rdio

  • social-reddit

  • social-skype

  • social-skillshare

  • social-smashing-mag

  • social-snapchat

  • social-spotify

  • social-squidoo

  • social-stack-overflow

  • social-steam

  • social-stumbleupon

  • social-treehouse

  • social-tumblr

  • social-twitter

  • social-vimeo

  • social-windows

  • social-xbox

  • social-yahoo

  • social-yelp

  • social-youtube

  • social-zerply

  • social-zurb

  • compass

  • music

  • lightbulb

  • battery-full

  • battery-half

  • battery-empty

  • projection-screen

  • info

  • power

  • asterisk

  • at-sign

  • key

  • ticket

  • book

  • book-bookmark

  • anchor

  • puzzle

  • foot

  • paw

  • mountains

  • trees

  • sheriff-badge

  • first-aid

  • trophy

  • prohibited

  • no-dogs

  • no-smoking

  • safety-cone

  • shield

  • crown

  • target

  • target-two

  • die-one

  • die-two

  • die-three

  • die-four

  • die-five

  • die-six

  • skull

  • map

  • clipboard

  • clipboard-pencil

  • clipboard-notes



How these were built

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:

<i class="fi-[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 the Font

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

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


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

×