Geomicons – A Unique Hand-Coded SVG Iconset

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

Read Also: Standart Icons – Free Vector Iconset in SVG, Sketch & Icon Font Formats

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

If you aren’t familiar with Node then you’ll probably never need to use any of the Node snippets. Same goes for the React.js version of these icons.

Still having support for major frameworks is a big deal. It’s more proof that Geomicons are meant to support any type of website by focusing on performance first.

To give these icons a test run you can pull a copy through npm or download them directly via GitHub.

There’s also an outline iconset called Geomicons Wired that you might wanna test as well.

Either way, this is a brilliant iconset for minimalist web designers. A perfect choice for optimizing your site with beautiful icons while decreasing total page load times.