npmpackage.info

@react-native-vector-icons/ant-design

Customizable Icons for React Native with support for image source and full styling.

4.4.2

17,518

MIT

TypeScript

4.76 kB

6,051 3.8

Installations

npm install @react-native-vector-icons/ant-design

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Min. Node Version

>= 18.0.0

Node Version

22.11.0

NPM Version

lerna/8.1.9/node@v22.11.0+x64 (linux)

Score

40.5

Supply Chain

45.6

Quality

80.4

Maintenance

Vulnerability

94.1

License

Pull Requests

Open

5

Total

423

Closed

185

Merged

233

Issues

Open

11

Total

1,269

Closed

1,258

Releases

10.2.0

v10.2.0

Published on 15 Sept 2024

10.1.0

v10.1.0

Published on 01 May 2024

10.0.3

v10.0.3

Published on 14 Dec 2023

10.0.2

v10.0.2

Published on 09 Nov 2023

10.0.1

v10.0.1

Published on 26 Oct 2023

10.0.0

v10.0.0

Published on 17 Jul 2023

View all 70 releases

Contributors

153

View all 153 contributors

Languages

TypeScript

JavaScript

Shell

Objective-C++

Kotlin

Ruby

CSS

HTML

Dockerfile

Objective-C

Python

TypeScript (71.13%)

JavaScript (9.43%)

Shell (5.96%)

Objective-C++ (3.79%)

Kotlin (3.7%)

Ruby (1.77%)

CSS (1.63%)

HTML (1.22%)

Dockerfile (0.61%)

Objective-C (0.6%)

Python (0.16%)

Developer

oblador

Download Statistics

Total Downloads

6,051

Last Day

Last Week

208

Last Month

918

Last Year

5,840

GitHub Statistics

17,518 Stars

1,243 Commits

2,120 Forks

201 Watching

4 Branches

153 Contributors

Bundle Size

11.25 kB

Minified

4.76 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

4.4.2

Package Id

@react-native-vector-icons/ant-design@4.4.2

Unpacked Size

182.34 kB

Size

82.36 kB

File Count

NPM Version

lerna/8.1.9/node@v22.11.0+x64 (linux)

Node Version

22.11.0

Publised On

28 Nov 2024

Total Downloads

Cumulative downloads

Total Downloads

6,051

Last day

-64.4%

Compared to previous day

Last week

-27.8%

208

Compared to previous week

Last month

44.3%

918

Compared to previous month

Last year

2,667.8%

5,840

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vector Icons for React Native

React Native Vector Icons

Elevate your React Native applications with the power of customizable vector icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these icons seamlessly integrate into your projects. Their versatility makes extension and styling effortless.

For the integration of .svg files natively, you can explore react-native-vector-image.

[!TIP] If you are still using the old single package react-native-vector-icons please visit https://github.com/oblador/react-native-vector-icons/tree/10.x

Sponsorship
Available Icon Sets
Installation
Setup
Icon Component
Usage as PNG Image/Source Object
Multi-Style Fonts
Custom Fonts
Animation
Dynamic icon font loading
Usage Examples
Changelog
License

Sponsorship

Should you find this library beneficial, kindly contemplate the option of sponsoring.

Available Icon Sets

Explore all icons.

RNVI comes with the following supported icons. You can search NPM for third party icons.

Actively maintained

AntDesign from Ant Group (v4.4.2 with 449 icons)
Feather created by Cole Bemis & Contributors (v4.29.2 featuring 287 icons)
FontAwesome 6 designed by Fonticons, Inc. (v6.7.2 featuring 2060 free and 52663 pro icons)
Foundation by ZURB, Inc. (v3.0 with 283 icons)
Ionicons crafted by Ionic (v7.4.0 containing 1356 icons)
MaterialDesignIcons from MaterialDesignIcons.com (v7.4.47 including 7448 icons)
Octicons designed by GitHub, Inc. (v19.14.0 with 332 icons)

No longer maintained upstream

Entypo by Daniel Bruce (v1.0.1 with 411 icons)
EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
FontAwesome by Fonticons, Inc. (v4.7.0 containing 785 icons)
FontAwesome 5 from Fonticons, Inc. (v5.15.4 offering 1611 free and 7869 pro icons)
Fontisto created by Kenan Gündoğan (v3.0.4 featuring 617 icons)
MaterialIcons by Google, Inc. (v4.0.0 featuring 2234 icons)
SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)
Zocial by Sam Collins (v1.1.1 with 100 icons)

Migration

See MIGRATION.md if you are migrating from react-native-vector-icons to the package-per-icon-set approach.

Installation

Install the common package

1npm install --save @react-native-vector-icons/common

Install the packages for the icons you want use

1npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evil-icons

Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
If you are using one of the following fonts refer to their guides for further instructions

Setup

Please refer to the guide for Expo, React Native or Web for further instructions.

`Icon` Component

You can either use one of the bundled icons above or roll your own custom font.

1import Icon from '@react-native-vector-icons/fontawesome';
2const myIcon = <Icon name="rocket" size={30} color="#900" />;

Props

Any Text props and the following:

Prop	Description	Default
`size`	Size of the icon, can also be passed as `fontSize` in the style object.	`12`
`name`	What icon to show, see Icon Explorer app or one of the links above.	None
`color`	Color of the icon.	Inherited

Static Methods

Prop	Description
`getImageSource`	Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)`

Styling

Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these:

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

By combining some of these you can create for example :

type star

Usage as PNG Image/Source Object

Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.

1const source = Icon.getImageSourceSync('user', 20, 'red');
2return <Image source={source} />;
3);

Alternatively you may use the async method Icon.getImageSource.

Keep in mind that Icon.getImageSourceSync is blocking and might incur performance penalties. Subsequent calls will use cache however.

Multi-Style Fonts

Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon component:

1import Icon from '@react-native-vector-icons/fontawesome5';
2
3const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
4const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
5const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro

Static methods

All static methods from Icon is supported by multi-styled fonts.

Prop	Description
`getImageSource`	Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)`

Custom Fonts

The best approach is to use our icon generator to create your own icon package.

See CREATE_FONT_PACKAGE.md to learn how to create your own font packages.

You can also use createIconSet() directly in your project. This returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it's character code. postScriptName is the name of the postscript font. Open the font in https://fontdrop.info/, Font Book.app or similar to learn the name. Also pass the fontFileName argument for Android support.

1import { createIconSet } from '@react-native-vector-icons/common';
2const glyphMap = { 'icon-name': 1234, test: '∆' };
3
4// use createIconSet() with object parameter
5// or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`
6const Icon = createIconSet(glyphMap, {
7   postScriptName: 'FontName',
8   fontFileName: 'font-name.ttf',
9   fontSource: require('../fonts/font-name.ttf') // optional, for dynamic loading. Can also be a local file uri.
10})

You should place the font ttf file into rnvi-fonts. You can customise this location by adding the following snippet to your package.json

1{
2  "reactNativeVectorIcons": {
3    "fontDir": "src/assets/fonts"
4  }
5}

Animation

React Native comes with an amazing animation library called Animated. To use it with an icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level animation library react-native-animatable.

Dynamic icon font loading

At the moment, dynamic loading is supported on native platforms (not on web) only if you use Expo. In the future, it should become available for all React Native projects via React Native core.

Fonts can be available in an app statically (since build time) or loaded dynamically at runtime. The latter can be useful e.g. for apps that use over-the-air updates and want to load new fonts with an update, or when you need to use a font from a remote location.

Dynamic loading in react-native-vector-icons is currently limited to those fonts that are bundled within the provided packages: it doesn't support Pro fonts (such as FontAwesome 5 Pro). However, loading of custom fonts is not difficult to implement: see any of the free font packages for reference.

By default, dynamic loading is enabled if supported by the version of Expo that you're using. It doesn't change the way you work with the package: If rendering an icon requires a font that is not known to the app, it will be loaded automatically and icon will render as expected.

@react-native-vector-icons/common exports several functions which you can use to control dynamic loading:

isDynamicLoadingEnabled: Returns whether dynamic loading is enabled.
isDynamicLoadingSupported: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present).
setDynamicLoadingEnabled: Enables or disables dynamic loading.
setDynamicLoadingErrorCallback: Sets a callback that is called (in the unlikely case) when an error occurs during dynamic loading. An example of when an error might happen is loading a misconfigured OTA update which doesn't include a necessary font file.

Usage Examples

Icon Explorer

Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.

Screenshot of IconExplorer

Basic Example

1import Icon from '@react-native-vector-icons/ionicons';
2
3function ExampleView(props) {
4  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
5}

Inline Icons

1import { Text } from 'react-native';
2import Icon from '@react-native-vector-icons/ionicons';
3
4function ExampleView(props) {
5  return (
6    <Text>
7      Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
8    </Text>
9  );
10}

Testing

When running tests with jest you will need to mock out the native code loading to prevent errors.

In jest.config.js add

1// Mock out font loading
2moduleNameMapper: {
3  '\\.(ttf)$': '<rootDir>/__mocks__/file-mock.js',
4}

Create __mocks__/file-mock.js:

1module.exports = {};

Create __mocks__/@react-native-vector-icons/common.js:

1// Mock the entire common library so there are no native module loading errors
2module.exports = {
3  createIconSet: () => "icon"
4}
5
6## [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
7
8## License
9
10This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
11
12Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yaml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/deploy.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/deploy.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yaml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/deploy.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yaml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/deploy.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yaml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/deploy.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yaml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yaml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yaml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/lint.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:146: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:163: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:166: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:171: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:177: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:212: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yaml:227: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yaml:234: update your workflow using https://app.stepsecurity.io/secureworkflow/oblador/react-native-vector-icons/tests.yaml/master?enable=pin
Warn: containerImage not pinned by hash: packages/fontcustom-docker/Dockerfile:1: pin your Docker image by updating debian:11-slim to debian:11-slim@sha256:6344a6747740d465bff88e833e43ef881a8c4dd51950dba5b30664c93f74cbef
Info: 0 out of 21 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 11 third-party GitHubAction dependencies pinned
Info: 0 out of 1 containerImage dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.8

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@react-native-vector-icons/ant-design

Installations

Developer Guide

Yes

CommonJS, ESM

>= 18.0.0

22.11.0

lerna/8.1.9/node@v22.11.0+x64 (linux)

Score

Pull Requests

5

423

185

233

Issues

11

1,269

1,258

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

11.25 kB

4.76 kB

Maintainers

Package Meta Information

Total Downloads

6,051

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Native Vector Icons

Table of Contents

Sponsorship

Available Icon Sets

Actively maintained

No longer maintained upstream

Migration

Installation

Setup

Icon Component

Props

Static Methods

Styling

Usage as PNG Image/Source Object

Multi-Style Fonts

Static methods

Custom Fonts

Animation

Dynamic icon font loading

Usage Examples

Icon Explorer

Basic Example

Inline Icons

Testing

10

10

10

9

1

0

0

0

0

0

0

0

3.8

/10

`Icon` Component