Introduction

nerdyIcons is a growing collection of 26,082+ beautifully crafted SVG icons for modern interfaces. Every icon is designed on a 24x24 grid with consistent stroke widths and rounded corners.

Icons are available in multiple styles: Stroke, Solid, Duotone, Two-tone, Bulk, 3D, and Brand. Use them in web, mobile, or desktop applications with full customization support.

Installation

Install nerdyIcons via your preferred package manager:

Usage

Import and use icons directly in your project:

import { Home, Search, Settings } from 'nerdyicons'

You can customize size, color, and stroke width via props:

<Home size={24} color="#333" strokeWidth={1.5} />

React

Install the React-specific package:

import { Home } from '@nerdyicons/react'

function App() {
  return <Home size={24} />
}

Vue

Install the Vue package:

<template>
  <HomeIcon size="24" />
</template>

<script setup>
import { HomeIcon } from '@nerdyicons/vue'
</script>

Svelte

Install the Svelte package:

<script>
  import { Home } from '@nerdyicons/svelte'
</script>

<Home size={24} />

Figma Plugin

Access the complete nerdyIcons library directly inside Figma. Search, browse, and drag icons into your designs instantly.