Install & setup

The same 441 icons ship to seven targets. Pick your platform for the exact install command, the setup step it needs, and a snippet you can copy straight into your project.

@refineui/react-icons

0.3.39

Named React components backed by the icon font. One component covers every supported size.

Install

npm install @refineui/react-icons

Register the font

Import once at your app entry point — the components only position a glyph.

import '@refineui/react-icons/dist/fonts/refineui-system-icons.css';

@refineui/react-native-icons

0.3.39

The same component API rendered through a native Text node. Icons are font glyphs, so the two font families have to be bundled with the app.

Install

npm install @refineui/react-native-icons

Bundle the fonts

The package ships web font formats only. Copy the OTF files into your app assets and link them so the RefineUI-System-Icons-Regular and RefineUI-System-Icons-Filled families resolve.

// react-native.config.js
module.exports = {
  assets: ['./assets/fonts'],
};

@refineui/web-icons

0.3.39

Framework-free helpers that return an HTML string, for vanilla projects or any templating layer.

Install

npm install @refineui/web-icons

Register the font

import '@refineui/web-icons/dist/fonts/refineui-system-icons.css';

@refineui/icon-cdn

0.3.39

Plain SVG files over jsDelivr. No install, no font — just a URL per icon and size.

URL shape

The file name drops the separators from the icon slug, so access-time becomes accesstime.

https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.3.39/icons/{size}/{icon}-{style}.svg

RefineUIIcons (SwiftPM)

0.3.39

A Swift package of SVG assets — no font registration. Requires iOS 13 or macOS 10.15.

Add the package

.package(
    url: "https://github.com/pelagornis/refineui-system-icons.git",
    from: "0.3.39"
)

Depend on the product

.target(
    name: "YourApp",
    dependencies: ["RefineUIIcons"]
)

com.pelagornis:refineui-system-icons

0.3.15

Vector drawables published to Maven Central. Minimum SDK 24. The Maven release trails the npm packages.

Add the dependency

repositories {
    mavenCentral()
}

dependencies {
    implementation("com.pelagornis:refineui-system-icons:0.3.15")
}

refineui_system_icons

0.3.39

IconData constants. The package declares its own fonts, so there is no app-side setup.

Add the dependency

dependencies:
  refineui_system_icons: ^0.3.39

Install

flutter pub get

React props

Every icon in @refineui/react-icons and @refineui/react-native-icons takes the same props.

Prop	Type	Default	Description
`size`	`number`	`24`	One of 16, 20, 24, 28, 32, 48. Selects the glyph drawn for that size.
`color`	`string`	`currentColor`	Any CSS color. Inherits from the parent by default.
`className`	`string`	`—`	Applied to the rendered span.
`style`	`CSSProperties`	`—`	Merged over the generated font styles.
`onClick`	`() => void`	`—`	Click handler on the rendered span.

Naming

Every platform derives its identifier from the same slug, so local-language resolves consistently across all of them.

Platform	Identifier
React · React Native · Web	`LocalLanguage` / `LocalLanguageFilled`
iOS	`.localLanguage24Regular`
Android	`@drawable/ic_refineui_local_language_24_regular`
Flutter	`RefineUIIcons.local_language_24_regular`
CDN	`icons/24/local-language-regular.svg`

Dynamic icons

When the icon name is only known at runtime, use IconUtils. It accepts sized and unsized method names and returns a React element, or null when no glyph exists.

import { IconUtils } from '@refineui/react-icons';

IconUtils.createIconMethod('AccessibilityRegular');
IconUtils.createIconMethod('Add24Filled', { style: { color: 'tomato' } });

IconUtils.searchIcons('language');
IconUtils.getIconChar('local-language', 'regular', 24);

Browse all 441 icons