How to Add Friconix Icons to Your Website

Updated

To add Friconix icons to your site, select the icons you want on friconix.com, add them to your board, download the generated JavaScript file, upload it to your server, and reference it in your HTML header with a deferred script tag. You then display the selected icons on your pages. This workflow suits anyone who can upload files to a web server and edit HTML; no build tools are required.

Step 1: Select icons and build your board

On the Friconix homepage, browse or search the icon collection. Click an icon to add it to your board. The board panel shows your current selection and confirms when it is empty, so you can verify each icon was added before moving on.

If you want to keep boards for later, the site offers sign-up and login; storing boards requires an account. You can also proceed without an account if you only need a one-time download.

Step 2: Download the generated JS file

In the board panel, use the download action to get your icons file. Friconix generates a single JavaScript file containing the icons you selected. Keep track of where your browser saves it.

Step 3: Upload the file to your server

Upload the downloaded file to your web server, for example alongside your other static assets. Note the path you choose, because you will reference it in the next step.

Step 4: Add the script tag to your HTML header

Add the following line in the header section of your HTML pages, replacing the path with the location of your uploaded file:

<script defer src="/path/to/friconix.js"></script>

The defer attribute lets the page continue parsing while the script loads. The site's instructions explicitly note that you must change the path to match your setup.

Step 5: Display the icons

With the script in place, the icons you selected become available on your HTML pages. Insert the icons where you need them in your markup. For the exact markup and options, see the Friconix documentation linked from the site.

What to check if icons don't appear

  • Path mismatch: The most common cause is a script src that doesn't match the uploaded file's real location. Open your browser's developer tools and confirm the file loads without a 404.
  • Script in the wrong place: The tag belongs in the header section, as the site instructs.
  • Board not downloaded after changes: If you add icons to your board later, download the JS file again and replace the old one on your server.
  • Account confusion: Logging in stores your boards, but it doesn't change where the file must be hosted; the script still needs to be uploaded to your own server.

Other formats and notes

Friconix describes itself as a free collection of vector icons and also offers downloads in SVG, PNG, and JPG, plus embed code, according to its site description. The JS-board workflow above is the path the homepage documents in detail. The site also links to a donate page and a FAQ, which you can check for licensing or usage details before publishing.