Solite Icons

Solite Icons gives your navigation, buttons, checkout screens, and dashboards one consistent visual language. Every glyph uses a 24 × 24 grid, 1.75px stroke, and rounded caps and joins.

Import only the icons you use. Control their size and color with React props or CSS. No icon font or stylesheet is required.

Start with one iconCopy Anchor Link

npm install github:Nikola-Limpet/solite-icons#main

import { ShopIcon } from "solite-icons";

<ShopIcon size={24} className="text-blue-600" />;

The library is available from GitHub. It has not been published to npm.

See it in ReactCopy Anchor Link

import { ShopIcon } from "solite-icons";

<ShopIcon size={32} strokeWidth={1.75} color="#2563eb" />

These previews render the actual package components. Adjust the controls and copy the resulting JSX into your project.

Find your next iconCopy Anchor Link

Browse all 229 icons for navigation, people and access, sales, payments, restaurants, cafés, retail, devices, and everyday controls.

• Installation: add the library to an existing project.
• React usage: named imports, refs, and buttons.
• Styling: size, stroke, color, Tailwind, and dark mode.
• SVG usage: use the files in HTML, Vue, Svelte, or Laravel.

RequirementsCopy Anchor Link

React components support React 18.2 and 19. SVG files and the data entry work without React. The package includes ESM, CommonJS, and TypeScript declarations.

The icon drawings are original and MIT licensed. This documentation uses Fumadocs, the same documentation framework used by Zod.