Grainly Icons

Overview

Grainly Icons is an open-source set of animated icons built from grids of pixel-like cells, which gives them a grainy look. The site describes them as "icons that feel like pixels", grained on top of Lucide, so the icon names follow Lucide's (a-arrow-down, accessibility, activity, alarm-clock and so on).

The project is a Next.js app at version 0.1.0 that generates its own shadcn registry JSON from an icons/ folder, so individual icons can be pulled into a project with the shadcn CLI.

Features

• Grid-based icons: Each icon is drawn from a grid of cells for a pixel, grain-textured style.
• Animated: Icons are animated rather than static SVGs.
• Lucide naming: Icon set is based on Lucide, so names match the familiar Lucide catalog.
• Registry build: An npm run registry:build script generates the registry JSON in public/r/ from the icon components.
• Open source: Source is available on GitHub.

Tech stack

• Next.js
• Tailwind CSS
• TypeScript

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @grainly-icons/component-name