Production Ready

Icons that
just work.

Hand-crafted SVG icons for React, Vue, Svelte and Vanilla JS. Tree-shakeable, accessible, fully typed - zero config.

0
Icons
0
Categories
2
npm Packages
~1kb
Per icon gzipped
MIT
License

// packages

Two Packages. One System.

Iconora ships as two separate npm packages so you only install what you need.

@iconora/core

The framework-agnostic foundation. Ships raw SVG path data, icon metadata, search utilities and TypeScript types. Zero dependencies — works in any JavaScript environment.

$ npm install @iconora/core
Zero deps TypeScript ESM + CJS Tree-shakeable
// use this for
  • Vue, Svelte, Angular projects
  • Vanilla HTML / plain JavaScript
  • Node.js scripts and tools
  • Building your own framework adapter
@iconora/react

Production-grade React components built on top of @iconora/core. Named exports, a generic Icon component, forwardRef, memo, full a11y, and TypeScript inference on every prop.

$ npm install @iconora/react
React 17+ Next.js Remix forwardRef memo
// use this for
  • React 17+ applications
  • Next.js and Remix projects
  • Named imports for best tree-shaking
  • Dynamic icon names at runtime

// compatibility

Works Everywhere.

@iconora/core is pure SVG data — use it in any framework, any environment.

⚛️
React
@iconora/react
Full support
💚
Vue
@iconora/core
Via core
🧡
Svelte
@iconora/core
Via core
🌐
Vanilla JS
@iconora/core
Via core

// browse

Every Icon

Click any icon to copy its React import. Search by name, tag, or category.

Showing 0 icons

// usage

Simple API

Examples for every package. Switch between React and core below. 

// Named import — best tree-shaking
import { HomeIcon, SearchIcon } from '@iconora/react';

export function Nav() {
  return (
    <nav>
      <HomeIcon size={24} />
      <SearchIcon
        size={20}
        color="#3b82f6"
        strokeWidth={1.5}
      />
    </nav>
  );
}
// Generic Icon — dynamic names
import { Icon } from '@iconora/react';

<Icon name="home" size={20} />
<Icon name="heart" color="red" label="Liked" />
// props
Prop Default Description
size 24 Width & height px
color currentColor Stroke color
strokeWidth 2 SVG stroke-width
label — aria-label + role
className — Extra CSS class
...rest — Any SVG attribute 
import { icons, searchIcons, getIconsByCategory } from '@iconora/core';

// Access raw SVG path data
const home = icons.home;
console.log(home.paths); // ['M3 9.5L12 3...', 'M9 21V12...']
console.log(home.category); // 'interface'
console.log(home.tags); // ['house', 'main', 'dashboard']

// Search icons by name or tag
const results = searchIcons('arrow');

// Get all icons in a category
const interfaceIcons = getIconsByCategory('interface');
<!-- Vue 3 — using @iconora/core -->
<template>
  <svg
    viewBox="0 0 24 24" :width="size" :height="size"
    fill="none" stroke="currentColor"
    stroke-width="2" stroke-linecap="round"
  >
    <path v-for="(d, i) in icon.paths" :key="i" :d="d" />
  </svg>
</template>

<script setup>
import { icons } from '@iconora/core';
const props = defineProps({ name: String, size: { default: 24 } });
const icon = icons[props.name];
</script>
<!-- Vanilla HTML — no bundler needed -->
<div id="icon"></div>

<script type="module">
  import { icons } from 'https://esm.sh/@iconora/core';

  const { paths } = icons.home;

  document.getElementById('icon').innerHTML = `
    <svg viewBox="0 0 24 24" width="32" height="32"
      fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round">
      ${paths.map(d => \`<path d="${d}"/>\`).join('')}
    </svg>
  `;
</script>

// why iconora

Built Right.

Tree-shakeable

Import only icons you use. sideEffects:false and proper ESM exports mean zero dead code in your bundle.

Accessible by default

Decorative icons get aria-hidden. Pass label and get aria-label + role="img" automatically.

TypeScript first

Full type inference on every prop. Generated .d.ts files. Autocomplete in every editor.

Framework-agnostic

@iconora/core has zero dependencies. Works in React, Vue, Svelte, Angular, or plain JavaScript.

Consistent design

Every icon on a 24×24 grid. Identical stroke widths, cap styles, and optical weight throughout.

MIT Licensed

Free forever. Use in personal and commercial projects. No attribution required.

// faq

Frequently Asked Questions

Everything you need to know about Iconora.

What is Iconora?
Iconora is a free, open-source SVG icon library with 60+ hand-crafted icons. It ships as two npm packages: @iconora/core (framework-agnostic SVG data) and @iconora/react (React components). All icons are MIT licensed and free to use in any project.
How do I install Iconora?
Run npm install @iconora/react for React projects, or npm install @iconora/core for Vue, Svelte, Angular or Vanilla JS. Both packages support ESM and CommonJS.
Does Iconora work with Next.js?
Yes! @iconora/react works perfectly with Next.js (both App Router and Pages Router), Remix, Vite, Create React App, and any other React-based framework.
Is Iconora tree-shakeable?
Yes. Both packages have sideEffects: false and proper ESM exports. When you import HomeIcon, only that icon's code is included in your bundle. All other icons are completely removed at build time.
Can I use Iconora with Vue or Svelte?
Yes! Install @iconora/core and use the raw SVG path data to build your own icon component in any framework. The core package has zero dependencies and works anywhere JavaScript runs.
Is Iconora free for commercial use?
Yes, Iconora is MIT licensed. You can use it in personal projects, commercial products, SaaS apps, and client work — completely free with no attribution required.

// install

Start in 30 seconds.

Drop into any project. Zero config required.


$ npm install @iconora/react