Iconixto for React

Introduction

The iconixto package has the free icons, every icon in the Line and Solid styles. Each icon is its own named export, so your bundle only includes the icons you import. Pro styles (Duo line, Duo color, Duo solid) come with an Iconixto Pro license and are generated into your project with one command. See Pro icons.

Works with any React 17+ setup: Next.js, Vite, Remix, Gatsby, Astro islands.

Installation

npm install iconixto

Or yarn add iconixto / pnpm add iconixto.

Usage

Import icons by name and use them like any component.

import { HomeLine, HeartSolid } from 'iconixto';

function App() {
  return (
    <nav>
      <HomeLine />
      <HeartSolid size={32} color="#e5484d" />
    </nav>
  );
}

Find an icon on the icons page, open it, pick React, and the How to use button gives you the exact code, with the size, colors and stroke you set in the editor.

Icon names

A component is named after the icon in PascalCase, followed by its style: ai-camera in Line is AiCameraLine.

Names can't start with a digit, so those get an Icon prefix (Icon360RotationLine), and + is spelled out (network-h+ → NetworkHPlusLine).

Props

Every other SVG prop (className, style, onClick, ref) goes straight to the <svg>.

Colors

Icons are drawn in currentColor, so they take the color of the text around them. Set color to override it.

<button className="text-purple-700">
  <NotificationLine /> {/* purple, from the button */}
</button>

<NotificationLine color="#fb6900" />

Duo styles have a second color: Duo color's purple, and the 40% layer of Duo line and Duo solid. Change it with accentColor, or for many icons at once with the --iconixto-accent CSS variable.

<CrownDuocolor color="#333" accentColor="#00a7fb" />

.sidebar {
  --iconixto-accent: #00a7fb;
}

Stroke width

Line-based icons take strokeWidth. A stroke scales with the icon, so a 1.5 stroke at size={48} looks twice as thick as at 24. Add absoluteStrokeWidth to keep it the same on screen at every size.

<SearchLine size={48} strokeWidth={1.5} absoluteStrokeWidth />

Solid and Duo solid icons are filled shapes, so stroke props don't change them.

Accessibility

Icons are hidden from screen readers by default, which is right when they sit next to text. When an icon is the only content, like in an icon button, give it a title, or label the button instead.

<button aria-label="Settings">
  <SettingsLine />
</button>

<HeartSolid title="Liked" />

Pro icons

Pro icons are never published to npm. With an Iconixto Pro license key, generate them into your project:

npm install iconixto
npx iconixto pro --key YOUR-LICENSE-KEY

This writes src/iconixto-pro/index.ts (or index.js in a project without TypeScript). Import from it like any of your own modules. The props are the same:

import { CrownDuocolor } from './iconixto-pro';

<CrownDuocolor size={32} accentColor="#00a7fb" />

Commit the generated folder: it's part of your code now, so builds and teammates don't need the key. Run the command again whenever you want new or updated Pro icons. The icons are licensed to you, so don't publish them in a public package or repository.

No license yet? See pricing.

Updates & versions

New icons are released automatically. A new version of the package goes out whenever the library changes, numbered so that npm update iconixto never breaks your code:

Other frameworks

The package is for React today. Vue, Svelte and plain-SVG builds are planned. Until then, any icon can be copied or downloaded as SVG from the icons page, and the Figma plugin puts the whole library in your design files.