Remix Icon: 3200+ Free SVG Icons for Websites

When working on a web project I find myself needing to add some icons to a webpage frequently. The agent might choose icons that do not align in style or it might create some icons that are not following a common iconography style.

I’ve found a collection that I use quite often. This set contains over 3200 neutral icons in svg format. The icons are all created in a 24 x 24 pixel canvas and they are all free to use for personal or commercial projects.

The creators call it an open source neutral style system of icons designed for designers & developers. What this means is that all the icons are created in a way that they feel cohesive as they all follow the same guidelines. Every icon is available in outline and fill style. You can access all the icons on their website, remixicon.com, where you can download any single icon as an svg or png file without any installation.

1How to add Remix Icon to your website

If you want to include all of the icons in your web page you can simply add one line of code in the head section of your html file. Once added you can access any icon by simply giving it a class.

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

The class is named ri- + iconname + (optional) either -line or -fill. A list of all the icons can be found on their website, remixicon.com, where you can search for the icon you need.

<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 -->

My experience shows that I tell the agent to set up the Remix Icon set via CDN and include the icons in the page. How I phrase it is something like this: ‘Include the Remix Icon set via CDN and add icons to the page. Use ri-search-line for the search bar. Use ri-user-3-line for the user avatar in the header. Use ri-settings-3-line for the settings.’ The agent understands the class name based on the css file and positions all the icons accordingly.

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

They make it clear that all the icons are free to use for personal and commercial use. They mention that they would appreciate if you refer to the icon collection when using the icons in your product, however, they also mention that this is optional. As of writing this article the collection is at version 4.9.0 and still being developed.