Icons
These are a collection of mapping icons I designed for the GIS web apps we build at NOAA. More icons and styles on the way. Enjoy!
mc-saline-negative-shaker
mc-saline-positive-shaker
mc-saline-shaker
mc-saline-negative
mc-saline-positive
mc-x-y-coordinates
mc-compass
mc-legend
mc-thermometer
mc-polygon
mc-ruler
mc-draw
mc-map-marker
mc-layers
mc-single-layer
mc-water-temp-celsius
mc-water-temp-fahrenheit
mc-bounding-box
mc-buffer
mc-draw-line
mc-wind
mc-map-services
mc-map-services-filled
mc-lidar-drone
mc-land-cover
mc-spatial
mc-spatial-filled
mc-metrics
mc-sweet-leaf
Instructions
Mapcons were designed on a 16px x 16px grid. Crisp sizes are 16px, 32px, 64px. However, they can be used at 20px, 24px, 28px with good results. Open demo.html to see a list of all the icons.
To use your new icons in a web app
- Copy all the font files to your fonts directory.
- Copy the mapcons.css file to your css directory. You may need to change the fonts path in the css file to reflect your specific project structure.
- Add the icon class you need to any DOM element to add an icon. Tip: it works best if you add the icon class to a span element nested inside a parent element. This gives the most styling flexiblity.
A demo diresctory is provided to get you started with some code. Make something awesome!
Example
Updates
A new minor version of Mapcons is available. In the 1.2 version the base grid size is 16px. for better integration with other font libraries.
Other changes are:
- Increased icon thinkess to 1px from .5 px
- Added two varients of the saline icons.
- Updated layers icon
- simplified draw icon
- Updated legend icon
- Updated buffer icon
- Added new metrics icon