DEV Community

Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT • Edited

I do prefer icones.js which gracefully plugs in to unplugin-icons for a purely agnostic approach and even more icons! 👍🏻

But this is also a nice one, thanks! 🙏🏻