React icons without the dependency

11,000+ hand-crafted SVG icons that paste straight into JSX. No icon package to install, version or tree-shake: your bundle ships only the icons you use, themed with currentColor.

Browse all iconsSee pricing

The pattern

Copy the SVG, wrap it once, use it everywhere

Every Majesticon is a clean 24×24 SVG. One tiny component per icon gives you size, color and stroke control.

1. Paste the icon into a component

Copy any icon from the icon explorer, camelCase the SVG attributes for JSX, and swap the stroke color for currentColor. This is the real arrow-right icon:

export function ArrowRightIcon({ size = 24, strokeWidth = 2, ...props }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
      <path
        d="M19 12L13 6M19 12L13 18M19 12H5"
        stroke="currentColor"
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

2. Theme it like text

Because the icon inherits currentColor, color, hover states and dark mode come from your existing CSS, and stroke-based line icons take any weight without falling apart.

// Inherits the text color, no color prop needed.
<button className="text-violet-600 hover:text-violet-700">
  Continue <ArrowRightIcon size={20} />
</button>

// Line icons are stroke-based, so weight is one prop away.
<HeartIcon size={32} strokeWidth={1.5} />

Try it live

Style, stroke and color, tuned before you copy

The icon explorer restyles the real SVG source, so what you copy is exactly what you tuned. Try it on these:

Stroke 1.5

Every icon works like this: pick a style, match your stroke width, drop it in. Try the full explorer

Why copy-paste

What plain SVG buys you in a React app

Icon packages are convenient until they aren't. Owning the SVG keeps the trade-offs on your side.

Zero bundle overhead

No library in package.json, no barrel-file imports pulling thousands of icons into your dev server. Each icon costs exactly its own bytes.

Server-component ready

Inline SVG renders anywhere React does (RSC, SSR, static export) with no client runtime and no hydration cost.

One consistent set

All 11,000+ icons share a 24×24 grid, stroke geometry and three matching styles: no mixing libraries to fill gaps.

Questions

Frequently asked questions

Everything about licensing, updates and how the library works.

Do I need to install an npm package?
No. Majesticons are plain, optimized SVGs: copy an icon from the web app and paste it into a JSX component. Your bundle only ever contains the icons you actually use, with no icon-library dependency to keep updated. A free MIT-licensed subset is also published on npm as "majesticons" if you prefer files.
How do I change the icon color in React?
Set the SVG stroke (or fill, for solid icons) to currentColor and the icon inherits CSS text color. Tailwind text-* classes, styled-components themes and plain CSS all just work.
Can I adjust the stroke width?
Yes: line icons are built from strokes with uniform round caps and joins, so strokeWidth={1.5} thins every part of the icon evenly. This is a deliberate design constraint of the set; icons drawn as outlined fills can’t do this.
Does this work with Next.js, Vite and React Native?
Next.js and Vite: yes, inline SVG in JSX is framework-agnostic and server-component friendly. For React Native you’d render the same paths through react-native-svg.
Are the icons free?
Browsing and previewing all 11,000+ icons is free, and 760 icons are MIT-licensed on npm. Copying and downloading the full set requires a one-time license, no subscription.

Icons your React app never has to update

Browse everything free. Pay once for copy, download, the Figma file and lifetime updates.

Browse all iconsGet access