Remix Icon vs Boxicons – Free Multi-Style Icon Sets Compared
Remix Icon vs Boxicons: both are free, open-source line/fill icon sets. Compare style variety, icon count, npm packages, and licensing.
Remix Icon and Boxicons solve the same problem the same way: a large, free, open-source icon set with both line and fill variants for nearly every glyph. If you want style flexibility without paying for a premium set, these two are the closest head-to-head comparison available.
Line vs fill, side by side
Both libraries ship two visual weights per icon concept — a distinguishing feature neither Lucide nor Heroicons offer for free.
Remix Icon uses an explicit -line / -fill suffix on every icon name. Boxicons does the same with a plain -filled suffix (home → home-filled) — both make it trivial to toggle icon weight programmatically without a lookup table. Boxicons’ brand logos ship in a separate collection, Boxicons Brands, rather than mixed into the main UI set.
Common UI icons
Search Line
Settings Line
Notification Line
Delete Bin Line
Edit Line
Search Filled
Cog Filled
Bell Filled
Trash Filled
Edit FilledIcon count
| Library | Total SVGs | Style split |
|---|---|---|
| Remix Icon | ~3,200 | Line + Fill (-line / -fill suffix) |
| Boxicons | ~3,800 | Regular + Filled (-filled suffix) |
The two are comparable in raw size once you count both styles. Both use a predictable suffix, so toggling icon weight dynamically (e.g. filled-on-hover) is a string swap in either library — no lookup table needed.
Boxicons splits brand logos into their own family — Boxicons Brands — separate from UI icons, similar to how Simple Icons is kept separate from general-purpose sets.
License
Both are fully free for commercial use:
- Remix Icon — Apache 2.0
- Boxicons — MIT (icons) / Apache 2.0 (fonts)
Neither requires attribution.
React integration
Neither ships an official React package with tree-shaking as polished as Lucide’s — both are most commonly consumed via Iconify or an icon font.
npm install @iconify/reactimport { Icon } from "@iconify/react";
// Remix Icon
<Icon icon="ri:home-line" width={20} />;
// Boxicons
<Icon icon="boxicons:home" width={20} />;When to use each
| Use case | Pick |
|---|---|
| Want line/fill toggle via simple naming | Both (-line/-fill vs -filled) |
| Need brand/logo icons alongside UI icons | Boxicons (via Boxicons Brands) |
| Bootstrap-adjacent visual style | Boxicons |
| Consistent 24px grid across the whole set | Remix Icon |
| Largest single UI icon collection | Boxicons (slightly larger total SVG count) |