Remix Icon: 3200+ Free SVG Icons for Websites

In my projects, adding icons to a web page is something that comes up often. The agent will sometimes pick icons from different sources that do not match each other visually, or it will generate shapes from scratch that look nothing like standard interface icons.

I have been using one collection that I return to regularly. It has more than 3200 neutral icons in SVG format, all designed on the same 24 by 24 pixel grid, and free for both personal and commercial use.

The authors describe the collection as an open-source neutral-style system of symbols for designers and developers. In practice this means all the icons look as if they belong together, because they were built to the same visual rules. Each icon comes in two styles, outlined and filled, and you can browse all of them at remixicon.com and download individual ones as SVG or PNG without installing anything.

1How to add Remix Icon to your website

The simplest way to get all the icons available on your page is to add one line in the head section of your HTML. After adding it, any icon appears by putting a class on an element.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />

The class name follows a pattern: ri- then the icon name, then either -line for the outlined version or -fill for the filled version. The names of all icons are listed at remixicon.com with a search function so you can find the right one quickly.

<i class="ri-search-line"></i>      <!-- search, outlined -->
<i class="ri-user-fill"></i>        <!-- user profile, filled -->
<i class="ri-settings-3-line"></i>  <!-- settings, outlined -->

In my experience, I give the agent one instruction that covers the whole setup. Regarding how to phrase it, I usually say something like: 'Connect the Remix Icon set via CDN and add icons to the page. For the search field use ri-search-line, for the user profile in the header use ri-user-3-line, for settings use ri-settings-3-line.' The agent reads the naming pattern from the CSS file and places everything correctly.

2Free SVG icons for commercial use: what the license says

Regarding the license, the authors state directly that all the icons are free for both personal and commercial use. Mentioning the collection name in your product is something the authors say they would appreciate, but they also write that it is not required. At the moment the collection is on version 4.9.0 and is actively maintained.