There are four ways to use icons in your project:
✅ No additional libraries, dependencies, or 100s of KB to add, and the icon and styles are simple to modify in the HTML.
💢 Code clarity
🏆 Best for: Web sites or apps that are not using many icons
If you want a clean way just like in popular icons libraries, you can define the icons you need, then use them with use
Adding to a JS File (Optional)
If you want to use the icons in multiple pages and you do not want to define them on every page, you can define them in a JS file and include it in your pages, then use them with use
Load the JS file in your page once
<body>
<script src="icons.js"></script>
<svg class="icon-s icon-dark-fill"><use href="#i-home"></use></svg>
✅ No additional libraries, dependencies, or 100s of KB to add, code clarity
💢 Cannot edit or change styles and the icon in the html, you need to edit the SVG file
🏆 Best for: Web sites or apps use the same icons in many places, code clarity is prioritized
The same steps in way 1 apply here, but you need to save the SVG code in a file with the .svg extension.
✅ Code clarity, the icon and styles are simple to modify in the HTML.
💢 Additional libraries, dependencies, and 100s of KB to add
💢 Additional cost might apply
🏆 Best for: Web apps that need 100's of icons, not recommended for websites
To use it just add the class icon to the SVG, it can be customized with variables --icon-default-size, --icon-default-fill, --icon-default-bg
Add the classes icon-xs icon-s icon-sm icon-m icon-ml icon-lg icon-xl
Built with love by Kim Majali, EITO team, and contributors.