A fun-themed simple open source icon by the folks at Natatoko. This icons provide 2 icons variant: 24x24 and 20x20. Practically, this icons are used on our web application, but feel free to use it on your project!
Install with npm.
npm install nataicons --saveCopy the SVGs you want to use from icons/24x24 or icons/20x20 inside node_modules/nataicons and inline them in your HTML.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.5 14l8.515-11v6.5H21L12.015 21v-7H3.5z"/>
</svg>- Include an icon on your page with the following markup:
<svg width="24" height="24" class="custom-class">
<use xlink:href="#24x24--alarm"></use>
</svg>- Import the icon
The Vue component located inside the package, so to import the component make sure to type the package name nataicons/vue.
import { Home24, Inbox24, Folder24, ... } from "nataicons/vue"- Use the icon on your project
By default, each icon size will be on 24x24 and 20x20 depends on the variant. You can set a custom size: Multiple based sizing followed by an x or set a px directly by passing an integer.
// Multiple based sizing
<Home24 size="2x" class="custom-class" />
// px based sizing
<Home24 size="20" class="custom-class" />Nataicons is licensed under the MIT License. In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.