Posted on May 18, 2022

You should know about xicons.org

For those developers like me, who are taking a lot of time trying to find good icons for your websites. I have a good news.

XICONS.ORR is the best place to get icons. They have support for framework like Vuejs 2, ReactJS, and VueJs 3.

ICONS INCLUDED IN THE PACKAGE:

FLUENT ICONS
Ionicons v4
Ionicons v5
Ant Design Icons
Fontawesome Icons
Material Icons
Tabler Icons
Carbon Icons

What I like about this package is you can install what icons you like, and its easy to integrate on your frameworks you are using.

You can also check instructions in their GITHUB REPO: https://github.com/07akioni/xicons

To install the package:

# 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

We also need the Icon wrapper for our icons.

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

example use for Vue 3:

<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>

example for ReactJS:

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>  ) }

example for Vue 2:

<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>