So, you’ve just purchased some icons that you’re ready to use! Here’s a step-by-step walkthrough which will help you start using these icons for your projects.

1. Download the Zip file

After you purchase the icons, you will more than likely be take to or given a link which you can then use to download the icons. This will most likely be provided to you in a zip file.

2. Open the folder

Once you open the zip file, you should see something like this:

3. Open your primary location

Now, you need to decide where you will use the icons. If you’re a developer, it will most likely be on VSCode, and a designer, most likely on Figma. Here’s how to start using them:

On VSCode:

1. Copy the icons folder from “Downloads” .
2. Create an “images” or “icons” folder in your VSCode project, and paste the icons folder inside.
3. Open your project in VSCode.
4. Now, in the location that you want to use the icon, you will be using the <img> tag.
5. In HTML, it would look something like this: <img src=”3 Dots.svg></img>
6. In React, like this: import 3 Dots from ‘../../../icons/3 Dots.svg’
7. Refresh the page and your icons should be showing.

In Figma:

1. On your local computer, locate the file which contains the icons you are looking for, and copy the whole icon set.
2. Go into your figma file, and select “Frame” on the navigation bar.
3. Create a frame that you think will hold all your icons, and then paste your icons inside.
4. You icons are now ready to be used inside Figma.

Congrats! Now, you know how to download and use your icons! Enjoy building your products!

Looking for minimal icons! Well, the guys at PremiereGoodsStudio just recently released a new minimalistic icon pack, complete with 50 black and white icons for $5.10. If you’re interested, check them out here: https://www.etsy.com/listing/1192112095/modern-minimalistic-icon-pack-100-black?click_key=98b3204b728be12d0dc32e55760c799913ec428b%3A1192112095&click_sum=82b9a185&ref=shop_home_feat_3

Article by zqdo.