Icon Fonts
Explore all the fonts.
Dripicons
A completely free vector line-icon font, explore all icons here
<template>
<i class="icon" data-icon="icon_name"></i>
</template>
Material Icons
Beautifully crafted icons for common actions, view complete set here
<template>
<i class="material-icons">icon_name</i>
</template>
Feathericons
Simply beautiful open source icons, view complete set here
<script setup>
import FeatherIcon from '@/hk-component/icons/FeatherIcon.vue'
</script>
<template>
<FeatherIcon name="icon_name" size="icon_size" color="icon_color" />
</template>
Fontawesome
The complete set of 675 icons, explore all icons here
<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script>
<template>
<FontAwesomeIcon icon="icon_name" />
</template>
Remix Icons
320+ pixel-perfect, hand-crafted icons, view complete set here
<template>
<i class="ti-icon_name" />
</template>
Line Awesome Icons
320+ pixel-perfect, hand-crafted icons, view complete set here
<template>
<i className="las la-icon_name" />
</template>
ZMDI Icons
320+ pixel-perfect, hand-crafted icons, view complete set here
<template>
<i className="zmdi zmdi-icon_name" />
</template>
Flag Icons
320+ pixel-perfect, hand-crafted icons, view complete set here
<template>
<i className="flag-icon flag-icon-in" />
</template>
Emoji
320+ pixel-perfect, hand-crafted icons, view complete set here
<template>
<i class="em em-emoji_name" />
</template>
Bootstrap Icon
Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.view complete set here
<template>
<i class="bi bi-icon_name" />
</template>