Here we will learn bootstrap glyphicon icons list with example and different types of bootstrap glyphicon icons like earphone, user, search, remove, chevron, audio, video, play, edit, eject, share, font, bold, italic, etc. with examples.
Bootstrap Glyphicon Icons
I've got to 'Building the Form and Button Panel' in the Building a bootstrap site tutorial. This code is supposed to display a button with an arrow, but it just displays an empty white box.
Bootstrap provides more than 250 glyph icons which are user, cloud, envelope, pencil, film, list, ok, zoom in / out, trash, home, road, download, refresh, etc.
The following table shows the list of glyphicon icons available in bootstrap.
Add another layer to your designs with our new duotone icons, available as part of Font Awesome Pro.These beautiful icons work out-of-the-box by inheriting your project’s base color, or customize them however you’d like. New: +420 Glyphicons PRO Icons Set (Value 59 USD) You can only use these icons with this template, reselling of these icons is prohibited and the license is nontransferable. If you would like to use GLYPHICONS as a part of your own (another) product, you have to buy your own license. New: Themes Support; New: Sidebar Auto-Hide Feature. Snippets for deprecated icon fonts, including the entire Glyphicons Pro family, Foundation Icons 1.0 and more! Installation Launch VS Code Quick Open ( Ctrl+P. Bootstrap glyphicons icons list with examples. Bootstrap provides more than 250 glyph icons those are glyphicon-user, pencil, remove, delete, download, picture, size, search, etc.
| Name | Usage Description | Icon | Example |
|---|---|---|---|
| asterisk | <i></i> | DEMO | |
| plus | <i></i> | DEMO | |
| euro | <i></i> | DEMO | |
| eur | <i></i> | DEMO | |
| minus | <i></i> | DEMO | |
| cloud | <i></i> | DEMO | |
| envelope | <i></i> | DEMO | |
| pencil | <i></i> | DEMO | |
| glass | <i></i> | DEMO | |
| music | <i></i> | DEMO | |
| search | <i></i> | DEMO | |
| heart | <i></i> | DEMO | |
| star | <i></i> | DEMO | |
| star empty | <i></i> | DEMO | |
| user | <i></i> | DEMO | |
| film | <i></i> | DEMO | |
| large | <i></i> | DEMO | |
| th | <i></i> | DEMO | |
| List | <i></i> | DEMO | |
| OK | <i></i> | DEMO | |
| Remove | <i></i> | DEMO | |
| Zoom In | <i></i> | DEMO | |
| Zoom Out | <i></i> | DEMO | |
| OFF | <i></i> | DEMO | |
| Signal | <i></i> | DEMO | |
| Cog | <i></i> | DEMO | |
| Trash | <i></i> | DEMO | |
| Home | <i></i> | DEMO | |
| File | <i></i> | DEMO | |
| Time | <i></i> | DEMO | |
| Road | <i></i> | DEMO | |
| Download Alt | <i></i> | DEMO | |
| Download | <i></i> | DEMO | |
| Upload | <i></i> | DEMO | |
| Inbox | <i></i> | DEMO | |
| Circle | <i></i> | DEMO | |
| Repeat | <i></i> | DEMO | |
| Refresh | <i></i> | DEMO | |
| List Alt | <i></i> | DEMO | |
| Lock | <i></i> | DEMO | |
| Flag | <i></i> | DEMO | |
| HeadPhones | <i></i> | DEMO | |
| Volume Off | <i></i> | DEMO | |
| Volumne Down | <i></i> | DEMO | |
| Volume Up | <i></i> | DEMO | |
| QR Code | <i></i> | DEMO | |
| BarCode | <i></i> | DEMO | |
| Tag | <i></i> | DEMO | |
| Tags | <i></i> | DEMO | |
| Book | <i></i> | DEMO | |
| Bookmark | <i></i> | DEMO | |
| <i></i> | DEMO | ||
| Camera | <i></i> | DEMO | |
| Font | <i></i> | DEMO | |
| Bold | <i></i> | DEMO | |
| Italic | <i></i> | DEMO | |
| Text Height | <i></i> | DEMO | |
| Text Width | <i></i> | DEMO | |
| Align Left | <i></i> | DEMO | |
| Align Center | <i></i> | DEMO | |
| Align Right | <i></i> | DEMO | |
| Align Justify | <i></i> | DEMO | |
| List | <i></i> | DEMO | |
| Indent Left | <i></i> | DEMO | |
| Indent Right | <i></i> | DEMO | |
| Video | <i></i> | DEMO | |
| Picture | <i></i> | DEMO | |
| Map Marker | <i></i> | DEMO | |
| Adjust | <i></i> | DEMO | |
| Tint | <i></i> | DEMO | |
| Edit | <i></i> | DEMO | |
| Share | <i></i> | DEMO | |
| Check | <i></i> | DEMO | |
| Move | <i></i> | DEMO | |
| Step Backward | <i></i> | DEMO | |
| Fast Backward | <i></i> | DEMO | |
| Backward | <i></i> | DEMO | |
| Play | <i></i> | DEMO | |
| Pause | <i></i> | DEMO | |
| Stop | <i></i> | DEMO | |
| Forward | <i></i> | DEMO | |
| Fast Forward | <i></i> | DEMO | |
| Step Forward | <i></i> | DEMO | |
| Eject | <i></i> | DEMO | |
| Chevron Left | <i></i> | DEMO | |
| Chevron Right | <i></i> | DEMO | |
| Plus Sign | <i></i> | DEMO | |
| Minus Sign | <i></i> | DEMO | |
| Remove Sign | <i></i> | DEMO | |
| OK Sign | <i></i> | DEMO | |
| Question Sign | <i></i> | DEMO | |
| Info Sign | <i></i> | DEMO | |
| Screenshot | <i></i> | DEMO | |
| Remove Circle | <i></i> | DEMO | |
| OK Circle | <i></i> | DEMO | |
| Ban Circle | <i></i> | DEMO | |
| Arrow Left | <i></i> | DEMO | |
| Arrow Right | <i></i> | DEMO | |
| Arrow Up | <i></i> | DEMO | |
| Arrow Down | <i></i> | DEMO | |
| Share Alt | <i></i> | DEMO | |
| Resize Full | <i></i> | DEMO | |
| Resize Small | <i></i> | DEMO | |
| Exclamation Sign | <i></i> | DEMO | |
| Gift | <i></i> | DEMO | |
| Leaf | <i></i> | DEMO | |
| Fire | <i></i> | DEMO | |
| Eye Open | <i></i> | DEMO | |
| Eye Close | <i></i> | DEMO | |
| Warning Sign | <i></i> | DEMO | |
| Plane | <i></i> | DEMO | |
| Calendar | <i></i> | DEMO | |
| Random | <i></i> | DEMO | |
| Comment | <i></i> | DEMO | |
| Magnet | <i></i> | DEMO | |
| Chevron Up | <i></i> | DEMO | |
| Chevron Down | <i></i> | DEMO | |
| Retweet | <i></i> | DEMO | |
| Shopping Cart | <i></i> | DEMO | |
| Folder Close | <i></i> | DEMO | |
| Folder Open | <i></i> | DEMO | |
| Resize Vertical | <i></i> | DEMO | |
| Resize Horizontal | <i></i> | DEMO | |
| Hard Disk | <i></i> | DEMO | |
| Bull Horn | <i></i> | DEMO | |
| Bell | <i></i> | DEMO | |
| Certificate | <i></i> | DEMO | |
| Thumbs Up | <i></i> | DEMO | |
| Thumbs Down | <i></i> | DEMO | |
| Hand Right | <i></i> | DEMO | |
| Hand Left | <i></i> | DEMO | |
| Hand Up | <i></i> | DEMO | |
| Hand Down | <i></i> | DEMO | |
| Circle Arrow Right | <i></i> | DEMO | |
| Circle Arrow Left | <i></i> | DEMO | |
| Circle Arrow Up | <i></i> | DEMO | |
| Circle Arrow Down | <i></i> | DEMO | |
| Globe | <i></i> | DEMO | |
| Wrench | <i></i> | DEMO | |
| Tasks | <i></i> | DEMO | |
| Filter | <i></i> | DEMO | |
| Briefcase | <i></i> | DEMO | |
| Full Screen | <i></i> | DEMO | |
| Dashboard | <i></i> | DEMO | |
| Paper Clip | <i></i> | DEMO | |
| Heart Empty | <i></i> | DEMO | |
| Link | <i></i> | DEMO | |
| Phone | <i></i> | DEMO | |
| Pushpin | <i></i> | DEMO | |
| USD | <i></i> | DEMO | |
| GBP | <i></i> | DEMO | |
| Sort | <i></i> | DEMO | |
| Alphabet | <i></i> | DEMO | |
| Alphabet Alt | <i></i> | DEMO | |
| Sort By Order | <i></i> | DEMO | |
| Sort By Order Alt | <i></i> | DEMO | |
| Attributes | <i></i> | DEMO | |
| Attributes Alt | <i></i> | DEMO | |
| Unchecked | <i></i> | DEMO | |
| Expand | <i></i> | DEMO | |
| Collapse Down | <i></i> | DEMO | |
| Collapse Up | <i></i> | DEMO | |
| Log in | <i></i> | DEMO | |
| Flash | <i></i> | DEMO | |
| Log Out | <i></i> | DEMO | |
| New Window | <i></i> | DEMO | |
| Record | <i></i> | DEMO | |
| Save | <i></i> | DEMO | |
| Open | <i></i> | DEMO | |
| Saved | <i></i> | DEMO | |
| Import | <i></i> | DEMO | |
| Export | <i></i> | DEMO | |
| Send | <i></i> | DEMO | |
| Floppy Disk | <i></i> | DEMO | |
| Floppy Saved | <i></i> | DEMO | |
| Floppy Remove | <i></i> | DEMO | |
| Floppy Save | <i></i> | DEMO | |
| Floppy Open | <i></i> | DEMO | |
| Credit Card | <i></i> | DEMO | |
| Transfer | <i></i> | DEMO | |
| Cutlery | <i></i> | DEMO | |
| Header | <i></i> | DEMO | |
| Compressed | <i></i> | DEMO | |
| EarPhone | <i></i> | DEMO | |
| Phone | <i></i> | DEMO | |
| Tower | <i></i> | DEMO | |
| Stats | <i></i> | DEMO | |
| SD Video | <i></i> | DEMO | |
| HD Video | <i></i> | DEMO | |
| Subtitles | <i></i> | DEMO | |
| Sound Stereo | <i></i> | DEMO | |
| Sound Dolby | <i></i> | DEMO | |
| Sound 5-1 | <i></i> | DEMO | |
| Sound 6-1 | <i></i> | DEMO | |
| Sound 7-1 | <i></i> | DEMO | |
| Copyright | <i></i> | DEMO | |
| Registration Mark | <i></i> | DEMO | |
| Cloud Download | <i></i> | DEMO | |
| Cloud Upload | <i></i> | DEMO | |
| Tree Conifer | <i></i> | DEMO | |
| Tree Deciduous | <i></i> | DEMO | |
| CD | <i></i> | DEMO | |
| Save File | <i></i> | DEMO | |
| Open File | <i></i> | DEMO | |
| Level Up | <i></i> | DEMO | |
| Copy | <i></i> | DEMO | |
| Paste | <i></i> | DEMO | |
| Alert | <i></i> | DEMO | |
| Equalizer | <i></i> | DEMO | |
| King | <i></i> | DEMO | |
| Queen | <i></i> | DEMO | |
| Pawn | <i></i> | DEMO | |
| Bishop | <i></i> | DEMO | |
| Knight | <i></i> | DEMO | |
| Baby Formula | <i></i> | DEMO | |
| Tent | <i></i> | DEMO | |
| Blackboard | <i></i> | DEMO | |
| Bed | <i></i> | DEMO | |
| Apple | <i></i> | DEMO | |
| Erase | <i></i> | DEMO | |
| Hour Glass | <i></i> | DEMO | |
| Lamp | <i></i> | DEMO | |
| Duplicate | <i></i> | DEMO | |
| Piggy Bank | <i></i> | DEMO | |
| Scissors | <i></i> | DEMO | |
| Bitcoin | <i></i> | DEMO | |
| BTC | <i></i> | DEMO | |
| XBT | <i></i> | DEMO | |
| Yen | <i></i> | DEMO | |
| JPY | <i></i> | DEMO | |
| Ruble | <i></i> | DEMO | |
| Rub | <i></i> | DEMO | |
| Scale | <i></i> | DEMO | |
| Ice Lolly | <i></i> | DEMO | |
| Ice Lolly Tasted | <i></i> | DEMO | |
| Education | <i></i> | DEMO | |
| Option Horizontal | <i></i> | DEMO | |
| Option Vertical | <i></i> | DEMO | |
| Menu Hamburger | <i></i> | DEMO | |
| Modal Window | <i></i> | DEMO | |
| Oil | <i></i> | DEMO | |
| Grain | <i></i> | DEMO | |
| SunGlasses | <i></i> | DEMO | |
| Text Size | <i></i> | DEMO | |
| Text Color | <i></i> | DEMO | |
| Text Background | <i></i> | DEMO | |
| Object Align Top | <i></i> | DEMO | |
| Object Align Bottom | <i></i> | DEMO | |
| Object Align Horizontal | <i></i> | DEMO | |
| Object Align Left | <i></i> | DEMO | |
| Object Align Vertical | <i></i> | DEMO | |
| Object Align Right | <i></i> | DEMO | |
| Triangle Right | <i></i> | DEMO | |
| Triangle Left | <i></i> | DEMO | |
| Triangle Bottom | <i></i> | DEMO | |
| Triangle Top | <i></i> | DEMO | |
| Console | <i></i> | DEMO | |
| SuperScript | <i></i> | DEMO | |
| Subscript | <i></i> | DEMO | |
| Menu Left | <i></i> | DEMO | |
| Menu Right | <i></i> | DEMO | |
| Menu Down | <i></i> | DEMO | |
| Menu Up | <i></i> | DEMO |
Table of Contents
If you are searching for some Bootstrap icons you should continue reading because in this article I’ve put together a list (and I’ll continue updating it) with the best free font icons to use with this framework. As you know font icons are a standard in web design these days for a long series of advantages: they are easy to use, they are lighter than using images, being vectors they can be scaled at any size and so are suitable to use in Retina displays, etc.
Integrating these icons in your Bootstrap project is very easy: all you have to do is download the package, add the files to your project, include the CSS file and start using the chosen icons in your HTML. In this post, for every icon set, after a short description, I also explain how to use them. There are also other ways (more advanced) of using these type of icons that you can learn in their documentation if interested.
Sometimes you will need more than one icon package in a website. For example, I’ve imported 2 different font icon sets in some of my Bootstrap templates, like Jalia and Trilli Bi, using different icons from each set. You can do so very easily with these icon packs. So, let’s begin:
1. Glyphicons Halflings
The first icon set I’ve included in this list is called Glyphicons Halflings and it’s already included in Bootstrap when you download it (the compiled version, from the official site). This set contains 200 font icons from the Glyphicon Halflings set that are normally not free, but their designer has made them available for free to use with Bootstrap. We say him thanks by including a link to the Glyphicons site!
So, if your project doesn’t need a big library of icons but just some icons here and there, you can use this set that is integrated in Bootstrap and keep your website or project fast and lightweight without including other files.
How to use them
You can find examples of how to use the Glyphicons in the Bootstrap documentation. Here is a basic example of how you can add an icon in your HTML:
2. Font Awesome
Font Awesome comes with 479 vector font icons (in version 4.2.0) from various categories completely free, of course, that can be used very easily with Bootstrap. You’ve probably heard of this icon set as it’s used in a lot of websites around the web (probably too much). However, its ease of use and the number of icons offered that can cover almost every project, make it very convenient and a real time-saver. I use this icon font in a lot of my templates.
Font Awesome homepage:http://fortawesome.github.io/Font-Awesome/
How to use Font Awesome
There are some ways of integrating Font Awesome in your project explained in the “get started” page.
The easiest way
The easiest way is to use the Bootstrap CDN with a single line of code without downloading anything. Just paste this code in the “head” section of your HTML:
Another method
Another method (which I prefer) is using the default Font Awesome CSS with the default Bootstrap CSS.
- Download and copy the “font-awesome” directory into your project.
- Add the link to the “font-awesome.min.css” file in the “head” section of your HTML.
There are also some other ways to insert Font Awesome in your project as you’ll see in the “get started” page.
Once integrated, you can learn how to use it in your HTML from the “examples” page. Here is a simple example:
Now just style the icon with CSS like you would do with fonts. Change font-size, color, text-shadow as you like.
3. Elegant Icon Font
The Elegant Icon Font comes with 360 font vector icons, completely free to use, made by the guys at Elegant Themes. These icons have been optimized for 16 pixels and all multiples of 16px (32px, 64px, etc). The result is pixel-perfect details and crisp, beautiful graphics on any display, including Retina displays.
This is one of my preferred icon sets and I’m using it a lot in my latest Bootstrap templates. As you’ll see, it’s very easy to integrate in Bootstrap websites.
Elegant Icon Font homepage:http://www.elegantthemes.com/blog/resources/elegant-icon-font
How to use the Elegant Icon Font
Including this font in a Bootstrap project is very simple:
- Download the package and extract it.
- In the “elegant_font” folder you’ll find a subfolder called “HTML CSS”. Copy it into your project (maybe rename it if you want).
- Add the link to the “style.css” file in the “head” section of your HTML.
Glyphicons Pronunciation
Once included, you can add the icons in your HTML and style them with CSS:
For example:
Here is how I’ve used these icons in the “Features” section of the Trilli Bi template:
The HTML:
The CSS:
4. Typicons
Typicons comes with 336 free vector icons, pixel perfect and multi-purpose, embedded in a webfont that can be easily used in your Bootstrap user interfaces for the web or for native applications.
Typicons homepage:http://typicons.com
How to use Typicons
To include the Typicons set in your Bootstrap project is pretty easy. In the Typicons homepage is clearly explained how to use the icons (in different ways) and you can also learn how to create your custom set of icons, including only the icons you need to make your project lighter and faster.
A simple way is to:
- Download the font files and minified CSS on the GitHub page here.
- Copy them in your project folder.
- Include the “typicons.min.css” file in the head section of your HTML.
Now add the icons in your HTML file where you want and style them with CSS:
You can find the appropriate class names for all icons in the Typicons homepage.
Glyphicons Protein
5. Meteocons
If you are designing a Bootstrap site or application that needs some Weather icons at some point, the Meteocons set is for you. It contains 40+ icons, completely free to use in commercial and personal projects and customize as you like, available in different formats: PSD, CSH, EPS, SVG, Desktop font and Web font.
Adding these icons to your Bootstrap project is very simple as you will see in the Meteocons homepage.
Meteocons homepage:http://www.alessioatzeni.com/meteocons
6. Open Iconic
Open Iconic is a free open source icon set containing 223 icons in SVG, Web font and raster formats. As its creators say, Open Iconic is “hyper-legible”, designed to be legible down to 8 pixels. This icon set has also a very small file size making your sites load fast.
Open Iconic comes with ready-to-use fonts and stylesheets that work with your favorite frameworks. In our case it works perfectly with Bootstrap.
Open Iconic homepage:https://useiconic.com/open
How to use Open Iconic
To include this icon set in your Bootstrap project is very easy:
- Download the package from the homepage.
- Copy the folder into your project.
- Include the “open-iconic-bootstrap.css” file in the head section of your HTML.
Now add the icons in your HTML files and style them with CSS:
You can find the appropriate class names for all icons in the Open Iconic homepage (link above).
7. Elusive Icons
Elusive Icons comes with 299 free icons, open-source, available as a Web font and as vector SVG.
Elusive Icons homepage:http://press.codes/downloads/elusive-icons-webfont
How to use Elusive Icons
Using Elusive Icons with Bootstrap is simple: you can use the CSS method or the LESS method. For the CSS method:
- Download the package and copy the “fonts” directory into your project.
- Copy the “elusive-webfont.css” file into your project.
- Open the “elusive-webfont.css” file above and edit the font urls to ensure they point to the right place.
- Include the “elusive-webfont.css” file in the head section of your HTML.
Now add the icons to your HTML code and style them with CSS as you like:
You can find all the icons class names in the Elusive Icons homepage (link above).
Conclusion
That’s all. Here you have the best free font icons to use with Bootstrap that I could find. I hope these icons will be useful to you and will help save some time in your design and development work. Also, I will update this list as soon as I find new icon sets. If you find or create a new set and think would be appropriate for this list, let me know so I can include it here.
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.