What is Next Icons?

An open-source icon library for React and Next.js that is lightweight, designed for simplicity and seamless integration. Each icon is designed on a 24x24 pixels grid.

Browse at nexticons.com →

Installation

You can download any icon directly from nexticons.com or get them from this repository.

The icons are also available via the @deemlol/next-icons NPM package.

npm install @deemlol/next-icons
# or
yarn add @deemlol/next-icons
# or
pnpm add @deemlol/next-icons
# or
bun add @deemlol/next-icons

Example Usage

import { Cookie } from "@deemlol/next-icons";

export default function Question() {
	return (
		<h1>
			Do you want <Cookie />?
		</h1>
	);
}

You can also include the whole icon pack:

import * as Icon from "@deemlol/next-icons";

export default function Question() {
	return (
		<h1>
			Do you want <Icon.Cookie />?
		</h1>
	);
}

Animated Icons

Animated icons are available from a dedicated import path:

import { Alarm } from "@deemlol/next-icons/animated";

export default function Preview() {
	return (
		<div>
			<Alarm />
		</div>
	);
}

You can use the same props as regular icons (size, color, strokeWidth, className). Some animations are interactive and run on hover/focus.

Configuration

All our icons can be also configured with props.

<Cookie size={40} color="#FF0000" strokeWidth={1.5} className="flex items-center" />

Support

If you encounter any issues or have questions, feel free to reach out to our Support Team via contact form on our website. Or you can also open an issue on our GitHub Repository.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Contributors

Thanks to all our contributors for their help and support in improving Next Icons!