Installation

Install with npm

npm install nataicons

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

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. Install with npm

npm install @nataicons/vue

2. Import the icon components

import { AlarmIcon, AlertIcon, NataIcon } from "nataicons/vue"

3. Use the icon components in your template

<template>
  <div>
    <AlarmIcon color="red" size="24" />
    <NataIcon name="bell" color="blue" size="32" />
  </div>
</template>
<script>
  import { AlarmIcon } from "nataicons/vue"
    export default {
    components: { AlarmIcon }
  }
</script>

You can set a custom size (in pixels) or use the default sizes (24px or 20px). The color prop allows you to change the icon color.

React

1. Install with npm

npm install @nataicons/react

2. Import the icon components

import { AlarmIcon, NataIcon } from "@nataicons/react"

3. Use the icon components in your JSX

function MyComponent() {
  return (
    <div>
      <AlarmIcon color="red" size={24} />
      <NataIcon name="bell" color="blue" size={32} />
    </div>  
  )
}

Similar to Vue, you can set a custom size (in pixels) or use the default sizes. The color prop allows you to change the icon color.

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.