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.

Usage

Javascript Method

Link to or include the geomicons.min.js (648 bytes) just before the closing body tag in your 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.

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

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

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

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

<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
	calendar
	camera
	chat
	check
	chevron-down
	chevron-left
	chevron-right
	chevron-up
	clock
	close
	cloud
	cog
	compose
	dribbble
	expand
	external
	facebook
	file
	folder
	geolocation
	github
	grid
	heart
	home
	info
	link
	list
	loading
	lock
	mail
	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
	twitter
	user
	video
	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)

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.

marviljoy/geomicons-open