SVG icons and font to use with GIS and spatial analysis tools
Font-GIS is a set of icons and graphics I've been using in my projects.
Font-GIS icons and font theme is designed mainly for GIS applications and web mapping tools. Feel free to use it in your commercial or open source projects, or really almost whatever you want. Font-GIS is free, open source, and GPL friendly!
You can use Font-GIS as a font or as SVG symbols or images.
To use it in a web page, just add the css in your project.
<link href="https://viglino.github.io/font-gis/css/font-gis.css" rel="stylesheet" />
Then use an inline element with a class prefixed with fg- to add a new icon.
Using a <span> is more semantically correct but a little bit verbose:
Or use it as an svg sprite (svg sprites are inlocated in the
<svg class="font-gis fg-2x"> <use xlink:href="path/to/dist/font-gis.svg#fg-polyline-pt" /> </svg>
Font-GIS is avaliable on NPM. To use Font-GIS in your project, install the font-gis package:
npm install --save font-gis
The font is located in the
the css and svg sprites are located in the
files of the font-gis project.
Unicode: - Theme: -
To increase icon sizes relative to their container,
fg-lg (33% increase),
Use CSS color to change font color:
fg-fw class to set icons at a fixed width.
Especially designed to use in nav lists & list groups to preserve alignment.
fg-rotate* classes to rotate icons (-20, -10, 10, 20, 45, 90, 135, 180, 225, 270 or 315).
fg-fliph classes to flip icons vertically or horizontally.
To stack multiple icons, use the
fg-stack class on the parent.
<span class="fg-stack fg-3x"> <i class="fg-compass" style="color:#666;"></i> <i class="fg-compass-needle fg-rotate45" style="color:#800;"></i> </span>
fg-pulse classes to animate icons.