Skip to main content
<span itemprop="name">Elusive-Icons Webfont</span>

Elusive-Icons Webfont

299 Sleek vector icons for bootstrap.

Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects!

It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.

When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on github.

Please notice that Elusive Icons Webfont isn’t a WordPress plugin and there’re already merged in Shoestrap theme. Check the “Instructions” section for installation notices.




  • el-icon-zoom-out

  • el-icon-zoom-in

  • el-icon-youtube

  • el-icon-wrench-alt

  • el-icon-wrench

  • el-icon-wordpress

  • el-icon-wheelchair

  • el-icon-website-alt

  • el-icon-website

  • el-icon-warning-sign

  • el-icon-w3c

  • el-icon-volume-up

  • el-icon-volume-off

  • el-icon-volume-down

  • el-icon-vkontakte

  • el-icon-vimeo

  • el-icon-view-mode

  • el-icon-video-chat

  • el-icon-video-alt

  • el-icon-video

  • el-icon-viadeo

  • el-icon-user

  • el-icon-usd

  • el-icon-upload

  • el-icon-unlock-alt

  • el-icon-unlock

  • el-icon-universal-access

  • el-icon-twitter

  • el-icon-tumblr

  • el-icon-trash-alt

  • el-icon-trash

  • el-icon-torso

  • el-icon-tint

  • el-icon-time-alt

  • el-icon-time

  • el-icon-thumbs-up

  • el-icon-thumbs-down

  • el-icon-th-list

  • el-icon-th-large

  • el-icon-th

  • el-icon-text-width

  • el-icon-text-height

  • el-icon-tasks

  • el-icon-tags

  • el-icon-tag

  • el-icon-stumbleupon

  • el-icon-stop-alt

  • el-icon-stop

  • el-icon-step-forward

  • el-icon-step-backward

  • el-icon-star-empty

  • el-icon-star-alt

  • el-icon-star

  • el-icon-stackoverflow

  • el-icon-spotify

  • el-icon-speaker

  • el-icon-soundcloud

  • el-icon-smiley-alt

  • el-icon-smiley

  • el-icon-slideshare

  • el-icon-skype

  • el-icon-signal

  • el-icon-shopping-cart-sign

  • el-icon-shopping-cart

  • el-icon-share-alt

  • el-icon-share

  • el-icon-search-alt

  • el-icon-search

  • el-icon-screenshot

  • el-icon-screen-alt

  • el-icon-screen

  • el-icon-scissors

  • el-icon-rss

  • el-icon-road

  • el-icon-reverse-alt

  • el-icon-retweet

  • el-icon-return-key

  • el-icon-resize-vertical

  • el-icon-resize-small

  • el-icon-resize-horizontal

  • el-icon-resize-full

  • el-icon-repeat-alt

  • el-icon-repeat

  • el-icon-remove-sign

  • el-icon-remove-circle

  • el-icon-remove

  • el-icon-refresh

  • el-icon-reddit

  • el-icon-record

  • el-icon-random

  • el-icon-quotes-alt

  • el-icon-quotes

  • el-icon-question-sign

  • el-icon-question

  • el-icon-qrcode

  • el-icon-puzzle

  • el-icon-print

  • el-icon-podcast

  • el-icon-plus-sign

  • el-icon-plus

  • el-icon-play-circle

  • el-icon-play-alt

  • el-icon-play

  • el-icon-plane

  • el-icon-pinterest

  • el-icon-picture

  • el-icon-picasa

  • el-icon-photo-alt

  • el-icon-photo

  • el-icon-phone-alt

  • el-icon-phone

  • el-icon-person

  • el-icon-pencil-alt

  • el-icon-pencil

  • el-icon-pause-alt

  • el-icon-pause

  • el-icon-path

  • el-icon-paper-clip-alt

  • el-icon-paper-clip

  • el-icon-opensource

  • el-icon-ok-sign

  • el-icon-ok-circle

  • el-icon-ok

  • el-icon-off

  • el-icon-network

  • el-icon-myspace

  • el-icon-music

  • el-icon-move

  • el-icon-minus-sign

  • el-icon-minus

  • el-icon-mic-alt

  • el-icon-mic

  • el-icon-map-marker-alt

  • el-icon-map-marker

  • el-icon-male

  • el-icon-magnet

  • el-icon-magic

  • el-icon-lock-alt

  • el-icon-lock

  • el-icon-livejournal

  • el-icon-list-alt

  • el-icon-list

  • el-icon-linkedin

  • el-icon-link

  • el-icon-lines

  • el-icon-leaf

  • el-icon-lastfm

  • el-icon-laptop-alt

  • el-icon-laptop

  • el-icon-key

  • el-icon-italic

  • el-icon-iphone-home

  • el-icon-instagram

  • el-icon-info-sign

  • el-icon-indent-right

  • el-icon-indent-left

  • el-icon-inbox-box

  • el-icon-inbox-alt

  • el-icon-inbox

  • el-icon-idea-alt

  • el-icon-idea

  • el-icon-hourglass

  • el-icon-home-alt

  • el-icon-home

  • el-icon-heart-empty

  • el-icon-heart-alt

  • el-icon-heart

  • el-icon-hearing-impaired

  • el-icon-headphones

  • el-icon-hdd

  • el-icon-hand-up

  • el-icon-hand-right

  • el-icon-hand-left

  • el-icon-hand-down

  • el-icon-guidedog

  • el-icon-group-alt

  • el-icon-group

  • el-icon-graph-alt

  • el-icon-graph

  • el-icon-googleplus

  • el-icon-globe-alt

  • el-icon-globe

  • el-icon-glasses

  • el-icon-glass

  • el-icon-github-text

  • el-icon-github

  • el-icon-gift

  • el-icon-gbp

  • el-icon-fullscreen

  • el-icon-friendfeed-rect

  • el-icon-friendfeed

  • el-icon-foursquare

  • el-icon-forward-alt

  • el-icon-forward

  • el-icon-fork

  • el-icon-fontsize

  • el-icon-font

  • el-icon-folder-sign

  • el-icon-folder-open

  • el-icon-folder-close

  • el-icon-folder

  • el-icon-flickr

  • el-icon-flag-alt

  • el-icon-flag

  • el-icon-fire

  • el-icon-filter

  • el-icon-film

  • el-icon-file-new-alt

  • el-icon-file-new

  • el-icon-file-edit-alt

  • el-icon-file-edit

  • el-icon-file-alt

  • el-icon-file

  • el-icon-female

  • el-icon-fast-forward

  • el-icon-fast-backward

  • el-icon-facetime-video

  • el-icon-facebook

  • el-icon-eye-open

  • el-icon-eye-close

  • el-icon-exclamation-sign

  • el-icon-eur

  • el-icon-error-alt

  • el-icon-error

  • el-icon-envelope-alt

  • el-icon-envelope

  • el-icon-eject

  • el-icon-edit

  • el-icon-dribbble

  • el-icon-download-alt

  • el-icon-download

  • el-icon-digg

  • el-icon-deviantart

  • el-icon-delicious

  • el-icon-dashboard

  • el-icon-css

  • el-icon-credit-card

  • el-icon-compass-alt

  • el-icon-compass

  • el-icon-comment-alt

  • el-icon-comment

  • el-icon-cogs

  • el-icon-cog-alt

  • el-icon-cog

  • el-icon-cloud-alt

  • el-icon-cloud

  • el-icon-circle-arrow-up

  • el-icon-circle-arrow-right

  • el-icon-circle-arrow-left

  • el-icon-circle-arrow-down

  • el-icon-child

  • el-icon-chevron-up

  • el-icon-chevron-right

  • el-icon-chevron-left

  • el-icon-chevron-down

  • el-icon-check-empty

  • el-icon-check

  • el-icon-certificate

  • el-icon-cc

  • el-icon-caret-up

  • el-icon-caret-right

  • el-icon-caret-left

  • el-icon-caret-down

  • el-icon-car

  • el-icon-camera

  • el-icon-calendar-sign

  • el-icon-calendar

  • el-icon-bullhorn

  • el-icon-bulb

  • el-icon-brush

  • el-icon-broom

  • el-icon-briefcase

  • el-icon-braille

  • el-icon-bookmark-empty

  • el-icon-bookmark

  • el-icon-book

  • el-icon-bold

  • el-icon-blogger

  • el-icon-blind

  • el-icon-bell

  • el-icon-behance

  • el-icon-barcode

  • el-icon-ban-circle

  • el-icon-backward

  • el-icon-asl

  • el-icon-arrow-up

  • el-icon-arrow-right

  • el-icon-arrow-left

  • el-icon-arrow-down

  • el-icon-align-right

  • el-icon-align-left

  • el-icon-align-justify

  • el-icon-align-center

  • el-icon-adult

  • el-icon-adjust-alt

  • el-icon-adjust

  • el-icon-address-book-alt

  • el-icon-address-book

  • el-icon-asterisk

Integration

You can use the Elusive icons font with bootstrap:

Bootstrap using LESS

Use this method if integrating with Twitter Bootstrap using LESS

  1. Copy the elusive-iconfont directory into your project.
  2. Copy elusive-webfont.less into your bootstrap/less directory.
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "elusive-webfont.less";
  4. Open your project’s elusive-webfont.less and edit the font url to ensure it points to the right place.
    @font-face {
      font-family: 'Elusive-Icons';
      src:url('../font/Elusive-Icons.eot');
      src:url('../font/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
        url('../font/Elusive-Icons.svg#Elusive-Icons') format('svg'),
        url('../font/Elusive-Icons.woff') format('woff'),
        url('../font/Elusive-Icons.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
  5. Re-compile your LESS if using a static compiler.
  6. You should be good to go!

Bootstrap using CSS

Use this method if integrating with Twitter Bootstrap using CSS.

  1. Customize Twitter Bootstrap here. Make sure to uncheck the default “Icons” under “Base CSS.”
  2. Copy the Elusive Icons font directory into your project.
  3. Copy elusive-webfont.css into your project.
  4. Open your project’s elusive-webfont.css and edit the font url to ensure it points to the right place (see above example).
  5. In the <head> of your html, reference the location to your elusive-webfont.css.
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/elusive-webfont.css">

Not using Bootstrap?

Elusive Icons works just as well without Twitter Bootstrap.

  1. Copy the Elusive Icons directory into your project.
  2. Copy elusive-webfont.less or elusive-webfont.css into your project.
  3. Open your project’s elusive-webfont.less or elusive-webfont.css and edit the font url to ensure it points to the right place (see above example).

31 Responses to “Elusive-Icons Webfont

  1. Joshua Tenner

    2013-05-23T14:18:03+00:00

    Wonderful product. Had more problems with IIS than I had with including the icons in my project.

    Thanks for your hard work!

  2. herni chinaski

    2013-06-06T22:09:54+00:00

    Thank you very much!!

    easy to install, great result

  3. Paulo Mendez

    2013-11-27T12:18:00+00:00

    thanks a lot!!

  4. Mateus Neves

    2013-12-03T20:03:00+00:00

    This is awesome!!! Tanks!!!

  5. myles

    2013-12-05T21:49:00+00:00

    Why is the SVG file empty? There are no vectors when I open it in Illustrator.

    • aristath

      2013-12-06T11:26:00+00:00

      SVG font files don’t simply open using illustrator.
      You can get the SVGs for individual icons though inside the dev/icons-svg folder.
      These can be opened with illustrator.

    • aristath

      2013-12-06T11:27:00+00:00

      SVG font files don’t simply open using illustrator.
      You can get the SVGs for individual icons though inside the dev/icons-svg folder.
      These can be opened with illustrator.

  6. Shane Permalloo

    2013-12-11T05:37:00+00:00

    Is there a Cheatsheets to get all the unicode of these icons ?

    • Ermanno Debenedetti

      2013-12-15T17:46:00+00:00

      +1.
      Being able to use the icons in Photoshop would be great!

      • Helder Faria

        2014-02-19T11:06:00+00:00

        I have the same opinion. Is there any way to use it in Photoshop?

  7. Wajid

    2013-12-19T07:34:00+00:00

    icon not working in Mozilla (i am using version 24) Please help me

    • aristath

      2013-12-30T20:13:00+00:00

      Hello there!

      Sorry for the long wait… Could you please try that again? I believe we fixed that a week ago, I just forgot to reply.

      • Wajid Ali

        2014-01-14T07:04:00+00:00

        thanks a lot!!

        • Adam Robins

          2014-01-15T11:42:00+00:00

          I always find it amusing people get something for free and then request more.

          • Brad Shaw

            2014-02-15T15:56:00+00:00

            So does that mean he’s not allowed to put in a request an important icon that’s missing from this set? That’s pretty stupid, given that it’s a pretty standard practice for all of these open source icon sets.

      • Wajid Ali

        2014-01-14T07:06:00+00:00

        Plz add icon mobile phone

    • aristath

      2014-01-03T19:08:00+00:00

      I think this has already been fixed, can you please try it again?

  8. Adonis K. (Varemenos)

    2014-01-04T13:19:00+00:00

    Φοβερός!

  9. J. Bruni

    2014-02-25T21:43:00+00:00

    I can’t find an “email” or “message” icon with an “envelope” drawing. I’ve scrolled up and down, quick and slow… what is the icon name? Is it really missing? I can’t believe. These icons are fantastic. Thanks a lot.

  10. Eduard Ungureanu

    2014-03-03T01:53:00+00:00

    Great Job Thank you for your hard work. Bookmark this page. Cheers.

  11. webapptester

    2014-03-22T17:03:00+00:00

    Just one word: Congats!!!!!!

  12. Kevin

    2014-03-27T23:42:00+00:00

    Tried to download the Elusive-Icons Webfont’s but something seems wrong with the .zip file. After downloading I tried to open the .zip file but tells me that the .zip file might be damaged. Others had these issues?

  13. anhthien8

    2014-05-26T03:47:00+00:00

    Hi, It don’t work On Mozilla Lasted. Please help !

  14. cool sir

    2014-06-10T14:09:00+00:00

    Very good,thank you。

  15. ray

    2014-07-08T17:42:00+00:00

    how would i go in adding this in phpbb template ?

  16. ArleyM

    2014-07-14T13:51:00+00:00

    Great collection. We started using it with grunt-webfont and ran into some issues I thought I’d share (attached).

    1. Some icons (like the bottom half or so) had extra items showing up. In Illustrator I had to remove some layers and paths (I tried to do it programmatically with a find and replace in my code editor, but I think the code ends up being a bit different in every file).

    2. The same issue would happen more subtle on other icons (see el-icon-digg, el-icon-fontsize and el-icon-fork).

    3. Lastly, I had to manually change the baseline on the el-icon-usd. I did this with some trial and error. I had to change the transform attribute to: transform=”matrix(11.27631,0,0,11.27631,10766.039,-4435)”

    All this made everything perfect for our font builds. Thought I’d share in case anyone else has issues!

    Great icon set!

    • aristath

      2014-07-22T15:40:00+00:00

      Hey there! Thanks… Could you please post a pull-request for this on our github repository? I’d be more than happy to implement your changes!

      • ArleyM

        2014-07-22T17:33:00+00:00

        I just did my first pull request on Github! Achievement unlocked! I hope this helps :)