Web iconsets are quickly becoming the norm for modern web design. They’re massive assets to web designers as these icons can be customized through CSSand resized without any quality loss.

But some icon packs can feel bloated and too large for smaller sites. That’s where Geomicons really shines.

This is a custom hand-coded icon pack running on SVG. You can embed the icons through JS scripts, or as direct SVG files into your page. Either way, they’re beautiful vectors and super easy to restyle.

The main Geomicons page features a full demo of all the icons. They’re pretty simple and follow the traditional single-color flat design style we’re all familiar with.

But their setup info is certainly lacking on the demo page. If you wanna learn how to set this up you’ll need to visit the GitHub repo for instructions.

By default, this library assumes you’re working with CSS/JS to have these icons embedded directly into page elements. Yet when you download the icons from GitHub you get all the raw SVG files which you can add directly into HTML.

Only trouble is that raw SVGs require more editing to change colors, whereas the JS/CSS route gives you control over colors via the code.

Simply add the geomicons.min.js script into your header and pass the data-icon attribute into HTML elements. These will auto-embed icons which you can then manipulate using CSS classes.

Another thing I really like about Geomicons is the support for Node. Here’s a sample snippet from the GitHub repo:

var geomicons = require('geomicons-open');
var pathData = geomicons.paths.heart; // Returns the path's d attribute value
var svgString = geomicons.toString('heart'); // Returns an SVG string


Please enter your comment!
Please enter your name here