Geomicons

82 vector (SVG) icons by jxnblk · MIT License

1
Background:
Loading...

jxnblk

Visit website
About the icon set
Author: jxnblk
Added: Jun 5th, 2014
License: MIT License
Vector: Yes
Categories: Mixed
Style: Glyph
Homepage: Visit homepage
Icon set description

Geomicons Open

Open Source Icons for the Web

http://jxnblk.github.io/geomicons-open

Fast, Plain & Simple

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.

Globe icon

Usage

Javascript Method

Link to or include the geomicons.min.js (648 bytes) just before the closing body tag in your HTML.

html <script src="geomicons.min.js"></script> </body>

Include the geomicons.svg file with your project. By default, the javascript looks for geomicons.svg in the same folder.

To change the location, adjust the iconUrl variable in geomicons.js. js // Location of svg sprite var iconUrl = 'geomicons.svg';

Use the following markup wherever you want an icon to appear. Be sure to include the .geomicon class and adjust the data-id attribute to match the icon you want. html <span class="geomicon" data-id="heart"></span> The javascript will replace this markup with an inline SVG and keep any classes you've added.

See the Icon Reference Table to find the proper id.

Style with CSS

SVGs have different properties than HTML elements. To change the color, use the fill property.

html <style> .fill-red { fill: red; } </style> <span class="geomicon fill-red" data-id="heart"></span>

See the geomicons.css file for a simple example of how to get started.

Sizing

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


Alternative SVG Defs Method

For even faster network performance, you can use native SVG defs instead of the javascript method above. This method makes zero extra network requests.

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. html <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 Jekyll, I'd recommend keeping the defs file in a partial for easy inclusion.

To use the icons, use the SVG <use> tag as shown below: html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"> <use xlink:href="#heart"></use> </svg>

Note: the animated loading icon does not currently work with the defs method.


Only using one or two icons

If you're only using one or two icons in your markup, it's probably better to just put 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.


Vector Drawing Applications

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 Reference Table

Icon ID
bookmark bookmark
calendar calendar
camera camera
chat chat
check check
chevron-down chevron-down
chevron-left chevron-left
chevron-right chevron-right
chevron-up chevron-up
clock clock
close close
cloud cloud
cog cog
compose compose
dribbble dribbble
expand expand
external external
facebook facebook
file file
folder folder
geolocation geolocation
github github
grid grid
heart heart
home home
info info
link link
list list
loading loading
lock lock
mail mail
music-note music-note
next next
no no
pause pause
picture picture
pin pin
play play
previous previous
refresh refresh
repost repost
search search
shopping-cart shopping-cart
skull skull
speaker-volume speaker-volume
speaker speaker
star star
tag tag
trash trash
triangle-down triangle-down
triangle-left triangle-left
triangle-right triangle-right
triangle-up triangle-up
twitter twitter
user user
video video
warning warning

Custom Builds

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 /icons folder. Then run gulp sprite 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.

Currently, these Gulp tasks aren't very flexible, but if you're daring and would like to attempt to add your own icons, the SVGs must: - Have a unique id attribute. - Contain only a single path element.

For a more powerful SVG tool, I'd suggest Grunticon.

Requesting Additional Icons

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.

Contributing

Geomicons Open is a curated set of icons. Guidelines for contributing are coming soon.

If you'd like to help improve the Gulp tasks, javascript or other development aspects, please do. I could use the help.

The MIT License (MIT)

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.

Add your comment
Login or signup to leave a comment
1 comments
19:03 06-06-2017
is this icon free ? can i use this for my android app ? please let me know Thank you!