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