Icons #

Get started with Hero Icons, Tailwind, Element-plus and Vuejs-app, the world’s most popular frameworks for building responsive, mobile-first sites.

heroicons #

A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects. Available as basic SVG icons and via first-party React and Vue libraries.

Usage #

First, install @heroicons/vue from npm:

npm install @heroicons/vue

In order to use this icons on your page you will need to import them inside the src/index.js file of your app:

import { [icon name] } from '@heroicons/vue/solid'

This is the demo for importing Thump Up icon with solid type from Hero icons.

import { ThumbUpIcon } from '@heroicons/vue/solid'

To order use the outline icon type, just change the solid word to outline word

import { ThumbUpIcon } from '@heroicons/vue/outline'

Now Thump up icon can be imported individually as a Vue component:

<template>
  <div>
    <ThumbUpIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
import { ThumbUpIcon } from '@heroicons/vue/solid'

export default {
  components: { ThumbUpIcon }
}
</script>

The 24x24 outline icons can be imported from @heroicons/vue/outline, and the 20x20 solid icons can be imported from @heroicons/vue/solid. Icons use an upper camel case naming convention and are always suffixed with the word Icon.

Browse the full list of icon names on UNPKG Click here.