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 »

General Icons

  • 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 Icons

  • 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 Icons

  • arrow-up

  • arrow-right

  • arrow-down

  • arrow-left

  • arrows-out

  • arrows-in

  • arrows-expand

  • arrows-compress

People Icons

  • torso

  • torso-female

  • torsos

  • torsos-female-male

  • torsos-male-female

  • torsos-all

  • torsos-all-female

  • torso-business

Device Icons

  • monitor

  • laptop

  • tablet-portrait

  • tablet-landscape

  • mobile

  • mobile-signal

  • usb

Text Editor Icons

  • 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

Media Control Icons

  • play

  • stop

  • pause

  • previous

  • rewind

  • fast-forward

  • next

  • record

  • play-circle

  • volume-none

  • volume

  • volume-strike

  • loop

  • shuffle

  • eject

  • rewind-ten

Ecommerce Icons

  • 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

Accessibility Icons

  • wheelchair

  • braille

  • closed-caption

  • blind

  • asl

  • hearing-aid

  • guide-dog

  • universal-access

  • telephone-accessible

  • elevator

  • male

  • female

  • male-female

  • male-symbol

  • female-symbol

Social & Brand Icons

  • 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

Miscellaneous Icons

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

Check out other Playground experiments

Grids thumb

Foundation Grids within Grids
Screen shot 2016 10 31 at 1.28.01 pm

Foundation for Apps
Thumb

Slinky
Grid

Motion UI
Startup playground

ZURB

ZURB is a product design company since 1998. Through consulting, product design tools and training, we transform the way businesses approach product design.

Want more?

Talk to us

Call us at (408) 341-0600

Not a big talker? Email us at [email protected]

Stay in touch

Get monthly updates from ZURB in your inbox. Read our latest news & buzz.

Get ZURBnews!

© 1998–2020 ZURB, Inc. All rights reserved.

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

×