# Implementing Icons
Include FontAwesome icons in your project using VueJS
# Need to install icons in your project?
If you need to add Font Awesome or Skyline custom icons to your project follow this guide.
# How To
# Step 1
Identify which icon you are going to use. You’ll need to find the icon's library location, weight and name. These values can be found in Figma or by asking the designer on the project.
Icon library:
- Font Awesome Pro (FA)
- Skyline custom
Icon weight:
- Light
- Regular
- Solid
# Step 2
Import the icon.
In your Vue file, import and register as you would any other sub-component following this pattern:
import MyIconName from '[path to npm modules with the icon library]/[icon-weight]/[icon-name].svg'
Font Awesome icon example in Vue.
import HandHoldingHeart from '@fortawesome/fontawesome-pro/svgs/regular/hand-holding-heart.svg'
Skyline custom icon example in Vue.
import PeerMatch from '@skyline/icons/src/regular/peer-match.svg'
# Step 3
Place the newly imported icon into the template just as you would any other sub-component:
<HandHoldingHeart />