×

Introducing Iconfinder Pro - Flatrate premium vector icons. Learn more.

Geomicons

0
 

Geomicons

Jun 5th, 2014
License: MIT License
Vector: Yes
Category: Mixed
Style: Glyph
Homepage: Visit homepage

Comments

No one has said anything yet — why not be the first?

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.