Open Source Icons for the Web
Smaller than similar webfonts and making fewer network requests than other icon solutions, Geomicons Open is built from the ground up for performance. Designed on a grid for pixel-precision at standard sizes, each icon is hand-coded to avoid the extra bloat from traditional vector drawing applications.
Download the source or install via NPM:
npm install geomicons-open
Or use the CDN link:
http://d2v52k3cl9vedd.cloudfront.net/geomicons/0.2.0/geomicons.min.js
Include geomicons.min.js (3KB gzipped).
<script src="geomicons.min.js"></script>Add the data-icon attribute to any element.
See the Icon Reference Table for reference.
<span class="js-geomicon" data-icon="heart"></span>Pass a nodelist to the Geomicons.inject() method to replace elements with SVG icons.
<script>
var icons = document.querySelectorAll('.js-geomicon');
Geomicons.inject(icons);
</script>Geomicons Open JS adds a style attribute with fill:currentcolor to inherit the foreground color.
Set the width, height, and other properties with additional CSS.
<style>
.geomicon { width: 1em; height: 1em; }
</style>
<span class="js-geomicon geomicon" data-id="heart"></span>Each icon is designed on a 32 x 32px grid. This means icons will look best at multiples of 16. I recommend sizing icons based on your type scale, or using one of the following sizes: 16, 24, 32, 48, or 64px.
If you're base font size is the browser default 16px, you can add styles that set width and height in ems and use multiples to keep the icons pixel perfect.
.geomicon {
width: 1em;
height: 1em;
}For a server-side solution, you can use native SVG defs instead of the javascript method above. This method makes zero extra network requests beyond the HTML file that includes it.
Instead of linking to the geomicons.min.js file, copy and paste the contents of the geomicons-defs.svg file in your HTML. This code will not show up in your page.
<svg xmnls="http://www.w3.org/2000/svg" width="0" height="0"><defs><!-- --></defs></svg>
</body>
</html>If you're using a templating system, such as Angular, React, Rails, or Jekyll, I'd recommend keeping the defs file in a component, helper, or partial for easy inclusion.
To use the icons, use the SVG <use> tag as shown below:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16">
<use xlink:href="#heart"></use>
</svg>You can also create partials, helper methods, or components to streamline the development process.
If you're only using one or two icons in your markup, it's probably better to paste the SVG code inline.
Open the icon SVG file and copy and paste the contents where you'd like to use it.
Be sure to adjust the id attribute to not conflict with other elements.
The SVG files in the icons folder should open in applications such as Adobe Illustrator and Sketch. If you encounter any problems, please create an issue.
| Icon | ID |
|---|---|
 |
bookmark |
 |
calendar |
 |
camera |
 |
chat |
 |
check |
 |
chevron-down |
 |
chevron-left |
 |
chevron-right |
 |
chevron-up |
 |
clock |
 |
close |
 |
cloud |
 |
cog |
 |
compose |
 |
dribbble |
 |
expand |
 |
external |
 |
|
 |
file |
 |
folder |
 |
geolocation |
 |
github |
 |
grid |
 |
heart |
 |
home |
 |
info |
 |
link |
 |
list |
 |
loading (not available in JavaScript version) |
 |
lock |
 |
|
 |
music-note |
 |
next |
 |
no |
 |
pause |
 |
picture |
 |
pin |
 |
play |
 |
previous |
 |
refresh |
 |
repost |
 |
search |
 |
shopping-cart |
 |
skull |
 |
speaker-volume |
 |
speaker |
 |
star |
 |
tag |
 |
trash |
 |
triangle-down |
 |
triangle-left |
 |
triangle-right |
 |
triangle-up |
 |
|
 |
user |
 |
video |
 |
warning |
If there are icons in the set that you will not be using, you can build custom versions of the sprites with Gulp tasks.
If you're unfamiliar with Gulp, get started here: http://gulpjs.com/
To remove icons from the sprite, first remove the unwanted icons from the /src/paths folder.
Then run gulp default to create a new geomicons.svg file.
If you're using the defs method, run gulp defs to create a new geomicons-defs.svg file.
For a more flexible SVG tool, check out Grunticon.
This set is intended to cover the most common use cases, and some things should just not be represented as an icon. I intend to add more, but if you have any requests, please Create an Issue.
Geomicons Open is a curated set of icons. Guidelines for contributing are coming soon.
Copyright (c) 2014 Brent Jackson
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.