Beautiful & consistent icon toolkit made for MeloSpot.

A modern, TypeScript-first icon library with multiple variants, perfect tree-shaking, and built-in accessibility. Like Lucide, but more modern.

MeloSpot Icons provides official packages for various frameworks and platforms to make integration easy.

Logo	Package	Version	Downloads	Links
🎯 Core	@melospot/icons-core			Docs · Source
⚛️ React	@melospot/icons-react			Docs · Source
🔷 Vue	@melospot/icons-vue			Docs · Source
🅰️ Angular	@melospot/icons-angular			Docs · Source
🔴 Svelte	melospot-icons-svelte			Docs · Source
🟡 Solid	melospot-icons-solid			Docs · Source
🟣 Preact	melospot-icons-preact			Docs · Source
📱 React Native	melospot-icons-rn			Docs · Source
🟠 Angular	melospot-icons-angular			Docs · Source
🖼️ SVG	melospot-icons-static			Docs · Source
🪐 Astro	melospot-icons-astro			Docs · Source

MeloSpot Icons also offers a Figma plugin to make it easy for designers to access and use icons.

Visit the Figma Community Page to install the plugin.

We welcome contributions! Please check out our Contribution Guide for more details on how to add new icons or improve the library.

Spotted a mistake or want to improve the documentation? Edit this page on GitHub.

Join the MeloSpot community to discuss features, get help, and share feedback!

• Join our Discord

MeloSpot Icons is free for both personal and commercial use and is licensed under the ISC License.

A huge thank you to all our contributors for making MeloSpot Icons possible!

Want to contribute? Check out our Contribution Guide.

import { Home } from '@melospot/icons-react'

<Home style="outline" />   {/* Clean strokes */}
<Home style="filled" />    {/* Solid shapes */}
<Home style="duotone" />   {/* Two-tone depth */}
<Home style="micro" />     {/* 12px optimized */}

// Only imports what you need
import { Home, Settings } from '@melospot/icons-react'

// Or use dynamic imports
import { Icon } from '@melospot/icons-react'
<Icon name="home" style="filled" />

import { useIconSearch } from '@melospot/icons-react'

const searchResults = useIconSearch('home')
const essentialIcons = useIconsByCategory('essential')

• WCAG 2.1 compliant
• Automatic aria-label generation
• Screen reader friendly
• Keyboard navigation support

• Full type safety
• Icon name autocomplete
• Prop validation
• Zero runtime overhead

See all modern features →

npm install @melospot/icons-react

import { Home, Settings, User } from '@melospot/icons-react'

function App() {
  return (
    <div>
      <Home size={24} strokeWidth={2} />
      <Settings style="filled" color="#F7931E" />
      <User className="hover:scale-110" />
    </div>
  )
}

npm install @melospot/icons-vue

npm install @melospot/icons-angular