fluid-icons

Fluid Icons

570+ soft, rounded, modern SVG icons. One 24px grid, 1.75 stroke, round caps and joins, generous corner radii. Works with React, Vue 3, plain HTML, web components, any bundler, or just as raw .svg files. Fully typed, tree-shakeable, zero dependencies.

• Outline icons: home, chat, zap
• Duotone icons (soft translucent fill): home-duo, chat-duo
• Badged icons: file-plus, user-check, cloud-x, folder-minus
• Built to inherit your text color (currentColor)

Find an icon

Browse visually, or search from the terminal. Nothing to install:

npx fluid-icons gallery          # opens the visual gallery (click any icon to copy its SVG)
npx fluid-icons search delete    # -> trash
npx fluid-icons search arrow     # all arrows
npx fluid-icons info trash       # copy-paste snippets for every framework
npx fluid-icons list --variant duotone

Search understands keywords, not just names: settings finds gear, trash finds delete, zap finds bolt.

Install

npm install fluid-icons
# or: pnpm add fluid-icons   |   yarn add fluid-icons   |   bun add fluid-icons

React

import { Home, Chat, ZapIcon, ArrowUpRight } from 'fluid-icons/react';

<Home />
<Chat size={20} strokeWidth={1.5} color="#6366f1" />
<ZapIcon className="text-amber-500" />
<Home title="Go home" />            {/* adds an accessible name; otherwise aria-hidden */}

Name = PascalCase of the icon name (arrow-up-right -> ArrowUpRight). Every icon is also exported with an Icon suffix (HomeIcon), useful when a name collides with a global such as Map or Image.

Pick an icon by string (handy for CMS or config driven UIs; uses every icon, so prefer named imports for smaller bundles):

import { Icon } from 'fluid-icons/react';
<Icon name="home" size={24} />

Next.js, Vite, Remix, CRA all work with no config. Components are plain forwardRef components and are safe in Server Components.

Vue 3

<script setup>
import { Home, Chat } from 'fluid-icons/vue';
</script>
<template>
  <Home :size="20" />
  <Chat color="rebeccapurple" :stroke-width="1.5" class="icon" />
</template>

Plain HTML (no build step)

<script type="module" src="https://cdn.jsdelivr.net/npm/fluid-icons/dist/element.js"></script>

<fluid-icon name="home"></fluid-icon>
<fluid-icon name="zap" size="32" color="orange" stroke-width="2"></fluid-icon>
<fluid-icon name="chat-duo" label="Messages"></fluid-icon>

Vanilla JS / Node / SSR

import { toSvg, search, names, has } from 'fluid-icons';

document.querySelector('#slot').innerHTML = toSvg('home', { size: 20, color: '#111', strokeWidth: 1.75 });
toSvg('chat', { title: 'Messages', className: 'icon' });   // returns an SVG string
search('delete');   // [{ name: 'trash', score: 100 }, ...]
has('home');        // true

CommonJS works too: const { toSvg } = require('fluid-icons').

Raw SVG files and sprite

import homeUrl from 'fluid-icons/svg/home.svg';   // bundlers that support asset imports

<!-- copy sprite.svg to your public folder once, then: -->
<svg width="24" height="24"><use href="/sprite.svg#fluid-home"/></svg>

Want just a few files in your own project (no dependency)?

npx fluid-icons add home chat zap --out ./src/assets/icons

Props (React and Vue)

Styling

Icons use currentColor, so color them with CSS:

.icon { color: #6366f1; }
.btn:hover .icon { color: white; }

Tailwind: <Home className="size-5 text-slate-500" /> (size classes override the default 24 only if you also pass size="1em" or omit width/height with CSS).

TypeScript

Types ship with the package. IconName is a union of every icon name, so toSvg('hom') is a compile error and your editor autocompletes names.

import { toSvg, type IconName } from 'fluid-icons';
const name: IconName = 'home';

Naming guide

Design spec

24 x 24 viewBox, 1.75px stroke, round caps and joins, minimum 4px corner radius on boxes, filled 1.1px "node" dots as accent. Keep to this when contributing so the set stays cohesive.

Contributing an icon

1. Add "your-icon": "<path d=\"...\"/>" to src/icons.json (inner SVG only, 24px grid, stroke-based, no fill unless it is a dot).
2. Optionally add keywords in src/aliases.json.
3. npm run build && npm test

Publishing (maintainers)

npm login
npm publish --access public    # prepublishOnly builds and tests first

License

MIT