@devchristian1337/dev-icons NPM

Dev Icons

A comprehensive library of high-quality SVG icons for various development technologies and frameworks. All icons are optimized for quality, scalability, and modern design aesthetics.

Installation

npm install @devchristian1337/dev-icons

Features

High-quality SVG icons
TypeScript support
Modern, consistent design
Easy-to-use API
Built-in validation
Zero dependencies
React component support

Available Icons

Currently supported icons:

Frontend Technologies

HTML
CSS
JavaScript
React
Vue.js
Angular (Classic & Modern versions)
Bootstrap (Classic & Modern versions)
TailwindCSS

Backend & Programming Languages

Node.js
Python
C#
PHP
Ruby
Swift
Kotlin
Dart
Java

Frameworks & Libraries

Django
Flutter
Electron

Cloud & DevOps

AWS
Azure
Docker

Databases

MongoDB
MySQL
PostgreSQL

Design Tools

Figma

Development Tools & Services

Git
GitHub
Copilot

Usage

React Component

The easiest way to use the icons is with the included React component:

import { DevIcon } from "@devchristian1337/dev-icons";

function App() {
  return (
    <div>
      {/* Basic usage */}
      <DevIcon name="react" />

      {/* Custom size */}
      <DevIcon name="javascript" size={32} />

      {/* With additional props */}
      <DevIcon
        name="nodejs"
        size={48}
        className="my-icon"
        onClick={() => console.log("Icon clicked!")}
      />
    </div>
  );
}

The DevIcon component accepts the following props:

name (required): The name of the icon to display
size (optional): Size in pixels (both width and height), defaults to 24
className (optional): Additional CSS classes
All standard SVG attributes are also supported

JavaScript/TypeScript API

You can also use the library programmatically:

import devIcons from "@devchristian1337/dev-icons";

// Get all icons
const allIcons = devIcons.getAllIcons();

// Get a specific icon
const reactIcon = devIcons.getIcon("react");
if (reactIcon) {
  console.log(reactIcon.name); // "React"
  console.log(reactIcon.icon); // SVG content for React icon
}

// Check if an icon exists
const hasTailwind = devIcons.hasIcon("tailwindcss"); // true

// Get all available icon keys
const iconKeys = devIcons.getIconKeys(); // ['html', 'css', 'javascript', ...]

// Add a custom icon (must be SVG)
try {
  devIcons.addIcon("customIcon", {
    name: "Custom Icon",
    icon: "<svg>...</svg>", // Your SVG content
  });
} catch (error) {
  if (error instanceof IconValidationError) {
    console.error("Invalid SVG provided");
  }
}