@vd7/icons

1639+ curated icons for modern web development.

Installation

npm install @vd7/icons

Quick Start

React

import { Home, User, Settings, ArrowRight } from '@vd7/icons/react';

function App() {
  return (
    <div>
      <Home size={24} />
      <User className="icon" />
      <Settings style={{ color: 'blue' }} />
      <ArrowRight />
    </div>
  );
}

Vue 3

<script setup>
import { Home, User, Settings } from '@vd7/icons/vue';
</script>

<template>
  <div>
    <Home :size="24" />
    <User class="icon" />
    <Settings :style="{ color: 'blue' }" />
  </div>
</template>

Svelte

<script>
import { Home, User, Settings } from '@vd7/icons/svelte';
</script>

<Home size={24} />
<User class="icon" />
<Settings style="color: blue" />

Vanilla JavaScript

import { searchIcons, getIconsByCategory } from '@vd7/icons';

// Search for icons
const arrows = searchIcons('arrow');
console.log(arrows); // [{ name: 'arrow-left', ... }, ...]

// Get by category
const uiIcons = getIconsByCategory('ui');

// Get all categories
import { categories } from '@vd7/icons';
console.log(categories); // ['arrow', 'ui', 'social', ...]

Features

• 🎨 1639+ Icons - Comprehensive collection
• ⚛️ React, Vue, Svelte - Framework components included
• 🌳 Tree-shakable - Only import what you use
• 📘 TypeScript - Full type definitions
• 🎯 Consistent Design - VD7 signature style
• 🔍 Searchable - Built-in search functionality
• 📦 Zero Dependencies - Lightweight and fast

Icon Props

All icon components accept standard SVG props:

<Home
  size={24}              // width & height
  color="currentColor"   // stroke color
  strokeWidth={2.1}      // stroke width
  className="icon"       // CSS class
  style={{ ... }}        // inline styles
  onClick={handleClick}  // event handlers
  // ... any other SVG props
/>

Categories

Icons are organized into categories:

• UI & Interface
• Arrows & Navigation
• Social & Brands
• Files & Documents
• Communication
• Media & Entertainment
• And many more...

TypeScript

Full TypeScript support included:

import { Home, User, Icon } from '@vd7/icons/react';
import type { IconProps } from '@vd7/icons';

const MyIcon: React.FC<IconProps> = (props) => {
  return <Home {...props} />;
};

License

MIT License - see LICENSE for details.

Icon attributions - see ATTRIBUTIONS.md for source credits.

Built with ❤️ by vd7