nataicons

nataicons copied to clipboard

Nataicons

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!

Installation

Install with npm.

npm install nataicons --save

Usage

Inline

Copy 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>

SVG Sprite

1. 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>

Vue

1. 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"

2. 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" />

Inspiration

1. vue-hero-icons
2. radix-icons
3. heroicons

License

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.