Home

Awesome

xicons License: MIT

English · 中文

Include vicons(vue3), ricons(react), sicons(svg) & v2icons(vue2).

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon.

Util icon component for customizing color & size is also provided.

Icons Preview & Search

https://www.xicons.org

Changelog

Installation

Icons Installation

# Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# For vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# For vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm i -D @v2icons/antd
npm i -D @v2icons/material
npm i -D @v2icons/fa # font awesome
npm i -D @v2icons/tabler
npm i -D @v2icons/carbon
# For SVG file
npm i -D @sicons/fluent
npm i -D @sicons/ionicons4
npm i -D @sicons/ionicons5
npm i -D @sicons/antd
npm i -D @sicons/material
npm i -D @sicons/fa # font awesome
npm i -D @sicons/tabler
npm i -D @sicons/carbon

Icon Utils Installation

Icon utils provide a icon wrapper component for customizing color & size of the inner SVG icon.

npm i -D @ricons/utils  # react
npm i -D @vicons/utils  # vue3
npm i -D @v2icons/utils # vue2

Usage

For Vue3

vue3 demo

<script>
  import { Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @vicons/utils

  import { Icon } from '@vicons/utils'

  export default {
    components: {
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

Q & A

import type { Component } from 'vue'

function f(iconComponent: Component) {
  // ...
}

For React

react demo

import { Money16Regular } from '@ricons/fluent'
// or
import Money16Regular from '@ricons/fluent/Money16Regular'

// You can directly use the SVG component
// or wrap it in an Icon component from @ricons/utils
import { Icon } from '@ricons/utils'

function App() {
  return (
    <Icon>
      <Money16Regular />
    </Icon>
  )
}

For Vue2

vue2 demo

<script>
  import { Money16Regular } from '@v2icons/fluent'
  // or
  import Money16Regular from '@v2icons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @v2icons/utils

  import { Icon } from '@v2icons/utils'

  export default {
    components: {
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

For SVG

<img src="@sicons/fluent/Money16Regular.svg" />

Utils API

Icon API

An icon component (in @vicons/utils, @ricons/utils, @v2icons/utils) is provided for customizing color & size of the inner SVG icon.

proptypedefaultdescription
sizestring | number-Size of the icon.
colorstring-Color of the icon.
tagstringspanTag to be rendered as.

For example:

import { Icon } from '@ricons/utils' // react
import { Icon } from '@vicons/utils' // vue3
import { Icon } from '@v2icons/utils' // vue2

// render it
;<Icon color="green" size="48">
  <SomeIcon />
</Icon>

IconConfigProvider API

IconConfigProvider will affect all the descendant Icons' default prop value.

proptypedefaultdescription
sizestring | number-Size of the icon.
colorstring-Color of the icon.
tagstringspanTag to be rendered as.

For example:

import { IconConfigProvider, Icon } from '@ricons/utils'  // react
import { IconConfigProvider, Icon } from '@vicons/utils'  // vue3
import { IconConfigProvider, Icon } from '@v2icons/utils' // vue2

// render it
;<IconConfigProvider color="green" size="48">
  <App>
    <Icon>
      <SomeIcon />
    </Icon>
  <App/>
</IconConfigProvider>

Common Issues

too many open files

This is because the count of opened files exceeds the limit of operation system.

Use ulimit -n to check the limit.

You can only increase the limit or import icons by path:

import Money16Regular from '@ricons/fluent/Money16Regular'

Icon Utils Packages

packageversiondescription
@ricons/utilsnpm versionUtil icon components for react.
@vicons/utilsnpm versionUtil icon components for vue3.
@v2icons/utilsnpm versionUtil icon components for vue2.

Icon Packages

Vue3

packageversion
@vicons/fluentnpm version
@vicons/ionicons4npm version
@vicons/ionicons5npm version
@vicons/antdnpm version
@vicons/materialnpm version
@vicons/fanpm version
@vicons/tablernpm version
@vicons/carbonnpm version

React

packageversion
@ricons/fluentnpm version
@ricons/ionicons4npm version
@ricons/ionicons5npm version
@ricons/antdnpm version
@ricons/materialnpm version
@ricons/fanpm version
@ricons/tablernpm version
@ricons/carbonnpm version

Vue2

packageversion
@v2icons/fluentnpm version
@v2icons/ionicons4npm version
@v2icons/ionicons5npm version
@v2icons/antdnpm version
@v2icons/materialnpm version
@v2icons/fanpm version
@v2icons/tablernpm version
@v2icons/carbonnpm version

SVG

packageversion
@sicons/fluentnpm version
@sicons/ionicons4npm version
@sicons/ionicons5npm version
@sicons/antdnpm version
@sicons/materialnpm version
@sicons/fanpm version
@sicons/tablernpm version
@sicons/carbonnpm version

Credit

Icon SetLicense
ant-design-iconsMIT
fluentui-system-iconsMIT
Font-AwesomeCC BY 4.0 License
ioniconsMIT
material-design-iconsApache 2
tabler-iconsMIT
carbonApache 2