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

Notice that Elusive Webfont isn’t a WP plugin and there’re already merged in Shoestrap theme.



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


  • 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

Comments

Joshua Tenner

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

Thanks for your hard work!

herni chinaski

Thank you very much!!

easy to install, great result

Paulo Mendez

thanks a lot!!

Mateus Neves

This is awesome!!! Tanks!!!

myles

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

aristath

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

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.

Shane Permalloo

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

Ermanno Debenedetti

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

Wajid

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

aristath

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.

aristath

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

Adonis K. (Varemenos)

Φοβερός!

aristath

Ευχαριστώ!

Wajid Ali

thanks a lot!!

Wajid Ali

Plz add icon mobile phone

Adam Robins

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

Brad Shaw

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.

Helder Faria

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

J. Bruni

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.

Eduard Ungureanu

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

Eduard Ungureanu

this is the icon: el-icon-envelope use your browser search for envelope. Simple as that.

webapptester

Just one word: Congats!!!!!!

Kevin

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?

aristath

Hey there! There was a bug and has been fixed. You can try downloading it again if you want... Or simply download it from the github repository:https://github.com/aristath/elusive-iconfont

anhthien8

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

cool sir

Very good,thank you。

ray

how would i go in adding this in phpbb template ?

ArleyM

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

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

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