Born out of frustration of other Icon Sets not containing Icons needed when developing LibreCMS, we created LibreICONS to fill the gap that we needed, and ended up consolidating all the Icons we were using into one set.
What sets LibreICONS apart from the rest, are the little things.
- The Icons are sized to 12px x 12px inside a 14px x 14px viewBox.
- The source of the Icons are all minified.
- Each Icon contains ARIA Markup to hide icons from Screen Readers to stop confusion between the Icons and any Presentational Elements that may contain them.
- Being minified, also makes embedding cleaner, as we found includinging Icons using PHP or Javascript to embed an icon, can break the page layout.
- There is no colour or sizing set in the icons source, so the colour and sizing can be controlled via CSS easily.
Then we decided to share it with you.
Using the Icons:
-
After downloading the project, copy the
libreicons-svg.cssorlibreicons-svg.min.cssfile from the project css/ folder, and the svg/ folder directory into your project. -
In the
<head>of your html, reference the location to yourlibreicons-svg.css.<link rel="stylesheet" href="path/to/libreicons/css/libreicons-svg.css"> -
To use the icons in your pages you use
<i class="libre">[svg file to include]</i>
You can also use other inline elements such as<span> - Or you could do like we do with LibreCMS and use a PHP Function to inject the SVG File directly into your generated pages. This also allows you to have more control over the size, colour, and animation of your icons.