Yes, this is still us! We're evolving with a fresh, professional identity. Exciting changes ahead.

Remix Icon – Free Source for Neutral-Style yet Delightful System Icons

August 24, 2021
Staff Blog
Share:
Table of Content
Table of Content

Visiting the Remix Icon website, you will see 2200+ icons in black and white colors on the first page. At a glance, those system icons exhibit a “minimalist” neutral-style yet delightfully clear design arranged neatly based on various themes.

Let’s Get Started

remix icon

Get started

By clicking this “Get Started” button, you will go to GitHub Repository for the Remix Icon design. You can read rich information about remixicon.com, the icon collections, benefits, usage, and many more.

Icon request

Click the “Request” button if you do not find any desired icon and request it by creating an issue entitled “Icon request” and filling the issue template.

Collection

There is a folder-shaped icon on the right top of the available icons. It is a place for your icon collections to modify the font-icon pack, import collection, or download icons in sets (batches).

The Usage

You can use the Remix Icon collections for three purposes: basic, Webfont, and SVG Sprite. How can you do that? Let’s take a deeper look at each of them.

Basic Use

Select or click any icons from the website and download them in PNG or SVG formats.

For designers, clicking the “Copy SVG” button and pressing the ⌘+V or Ctrl+V will paste the vector graphic directly to your design.

Nowadays, you can use the “Copy SVG” feature to work with Adobe XD, Sketch, Adobe Illustrator, Figma, Affinity Designer or Photo, and more.

For web usage, you can use SVG as simple and easy as PNG or JPEG.

Webfont

Three ways to import icons from remixicon.com are NPM installation, CDN, and manual download.

  • After finish installing NPM, copy the ‘remixicon.css’ to your main.js.
  • For CDN, copy the available code and add it to your Html document’s <head> tag.
  • To download manually, download the ‘remixicon.css’ file and add it to the <head> tag of your Html document.

Webfont usage allows you to add a class name to any icon. You can check the icon names on the website: -lines are for outlined-style icons, and –fill is for filled-style ones. Also, you can resize the icon fonts by css class.

SVG Sprite

SVG sprite is an SVG file comprising several images (for example, icons) distributed in a grid. Download the remixicon.symbol.svg file and add it to your project directory to create an SVG image sprite. You can use any icon with the <use> element.

Why Choosing Remix Icon?

In addition to an open-source site, Remix Icon offers more than you expect, as you can see below.

  • Per May 2020, remixicon.com has more than 2200 icon collections.
  • Unlike other patchwork icon libraries, the creator has elaborately crafted the icons for web or creative work designers and developers.
  • Those icons bear the genes of easy-to-read (readability), consistency, and flawless pixels.
  • Each icon has the Outlined- and Filled-style designs built on the 24/24 grid base.
  • Licensed under the Apache License Version 2.0, you can use the icons for free, both personally and commercially.

At last, a notification posted on 12 July 2020 informed Remix Icon will go through a temporary update suspension. The good news is that the official remixicon.com is still in service, even there is a plan for a big version of RemixIcon in the future.

Related Post

Typing a negative prompt for cleaner AI images
September 18, 2025
Midjourney has quickly become a leading AI image generator, with 19.26 million registered users on its Discord server, according to DemandSage. However, the AI doesn’t always capture intentions perfectly. That’s why a Midjourney negative prompt is crucial because it tells the AI what not to include. Using a negative prompt helps avoid unwanted elements like…
READ MORE
Poster Board Design Ideas
September 17, 2025
Designing a poster is a crucial task, as it requires presenting all the necessary information in a single visual without overwhelming the viewer. That’s why we’ve gathered practical tips and inspiring poster board design ideas to help you broaden your perspective and elevate your design to the next level. Key takeaways Combine visuals and text…
READ MORE
How to Invoice as a Freelancer
September 16, 2025
Freelancing grants freedom and simultaneously introduces you to new responsibilities, such as handling transactions with the clients on your own whilst ensuring the quality of your service or product. But, worry not! There is no need to panic. You just need to learn how to invoice as a freelancer​ with this simple guide.  Key Takeaways:…
READ MORE
11 UX Research Methods All UX Researchers Must Know
September 15, 2025
Before designing any application or website, UX researchers must conduct thorough research to uncover the insights that turn digital products from ordinary to exceptional. To achieve this, they rely on proven UX research methods that guide every stage of the design process. Equally important, UX researchers must know various UX research methods and when to…
READ MORE