Documentation

• Regular — 1.25px line on a 24px grid.
• Solid (filled in files and code) — Filled silhouettes with transparent cutouts.
• Duocolor — Primary structure with secondary details.
• Duotone — Line with a 16% interior tint.

Every icon ships in all four styles under the same canonical kebab-case name. Line styles use 1.25px strokes. Negative space and modifier clearances are genuinely transparent, not painted with a background color.

Download an icon from the inspector, or copy files from icons/regular/, icons/filled/, icons/duocolor/, or icons/duotone/ in the library repository. There is no runtime dependency or icon font.

<img src="./icons/regular/text-align-left.svg" width="24" height="24" alt="Align text left">

To theme with CSS, inline the markup instead: the library's currentColor follows the parent element's color. Don't globally override fill on paths — Solid icons rely on real transparent cutouts.

Website downloads are standalone. Files exported here have every color resolved to a concrete value, so they render the same in any viewer or design tool. Masks, clip paths, and the Duotone tint are kept intact. If you want live theming, use the library SVGs.

@fedora-icons/react is on npm. It supports React 18 and 19, ships TypeScript types, and tree-shakes to the icons you import. Source: fedora-icons/react-fedora.

npm install @fedora-icons/react

Each style is a separate component: the canonical name in PascalCase plus a style suffix. fuel-pump becomes FuelPumpRegular, FuelPumpFilled, FuelPumpDuocolor, and FuelPumpDuotone. Solid icons use the Filled suffix. Names starting with a digit get an Icon prefix.

import { CameraRegular, CameraDuocolor } from '@fedora-icons/react';

<CameraRegular size={24} />
<CameraDuocolor size={32} primaryColor="#245B9E" secondaryColor="#60A5FA" />

• size defaults to 24 and sets width and height. It scales the artwork; it does not select a different optical size.
• Regular and Filled inherit currentColor. Duo styles default to blue; set color or primaryColor, and secondaryColor for accents.
• Named presets with an independent glyph color accept modifierColor.
• Icons are decorative by default (aria-hidden). Pass title, aria-label, or aria-labelledby for meaningful icons.
• Root imports are tree-shakeable; @fedora-icons/react/filled and @fedora-icons/react/regular/camera entry points also exist.

The inspector's React example uses these exact props.

The Fedora Icons Figma library holds every core icon as a component set with Style=Regular/Filled/Duocolor/Duotone and Size=24. Its Get Started page covers styles, instances, themes, modifiers, and exports.

• Fedora / Theme switches Light and Dark, and holds the twelve duo palettes.
• Fedora / Stroke offers 16px (1px), 24px (1.25px, default), and 32px (1.5px) stroke presets. These change stroke weight only, not icon dimensions.
• Named icon instances expose their nested Modifier controls in the properties panel.

SVGs downloaded here can also be pasted or dropped into Figma; their colors are already resolved.

Regular and Solid are single-color icons. Duocolor and Duotone use two CSS custom properties with blue defaults:

.toolbar svg {
  --fedora-primary: #245B9E;
  --fedora-secondary: #5B87B7;
}

Duocolor uses the secondary color for details; single-contour icons stay primary-only. Duotone tints closed shapes with 16% of the primary color. Named presets add --fedora-modifier for their solid glyph.

The twelve library palettes, each with Light and Dark pairs:

• Slate
• Blue
• Sky
• Cyan
• Teal
• Green
• Lime
• Yellow
• Amber
• Orange
• Red
• Rose

Every icon is authored at 24px. Other sizes are scaled from that master — Fedora does not yet have separately authored optical sizes. Check icons at their final size, especially below 20px.

Modifiers combine a base icon with a small solid glyph — Add, Delete, Lock, file-type labels, and more — with a designed corner position and a transparent clearance gap so the glyph never touches the base.

The library currently includes 115 authored compositions across 14 base icons, using 55 modifiers. In the inspector, open a base icon such as user or file and choose from the Modifier menu.

The website offers only these authored compositions. It does not generate arbitrary base-and-glyph combinations, because automatic conflict handling has not been designed yet. For other combinations, the library's Python composer supports the four corners with real clearance:

python3 scripts/compose_svg.py home-smile --modifier key --position bottom-right --output home-key.svg

• Decorative inline icons: add aria-hidden="true".
• Icon-only buttons and links need an accessible name on the control, e.g. aria-label="Delete".
• Meaningful standalone icons: role="img" with a label, or an alt on <img>.
• Check contrast against the background (3:1 for meaningful graphics) and keep interactive targets at least 24×24px.

An icon library alone can't make an interface accessible — pair icons with clear labels.

The core icons and tooling are available under the MIT License.

Brand icons are not covered by the MIT license. All brand icons belong to their respective owners, and their use is governed by each owner's brand guidelines. No affiliation or endorsement is implied.

This site sets no cookies and runs no analytics, ads, or tracking scripts. Fonts and icons are served from this site, not from third parties.

Your browser's local storage keeps three preferences, and only on your device:

• fedora-theme: light or dark, when you pick one instead of following your system.
• fedora-pane-collapsed: whether the side pane is collapsed.
• fedora-pane-width: the side pane's width, when you resize it.

Searches, customizations, and downloads happen in your browser and aren't sent anywhere. Links to GitHub, npm, and Figma take you to those services, which have their own privacy policies. Like any website, the server hosting this one may keep standard request logs.

To clear the stored preferences, clear this site's data in your browser settings.

This site is generated from the fedora-icons library. Counts, categories, names, and aliases come from its manifest.

Revision

573481e020959e0386ff9f659423359f65a2ec97

Manifest

sha256:568fb7cc831aeacbf807b59936b36caaa1487f4e5901f296e5f599b92bcd7611