Remix Icon and remixicon: Apache SVGs on a 24px grid

Tool powered by Remix Icon on Remix Icon.

Browse remixicon.com: Remix Icon and Remix Icons browser—Apache-2.0 SVG on a 24px grid, outlined and filled. Search UI glyphs; confirm license upstream.

What is Remix Icon?

Remix Icon is a free, open source icon system aimed at product interfaces. Icons are drawn on a 24 by 24 pixel grid and published in outlined and filled variants so you can match navigation, forms, charts, dropdowns, and event-style UI without mixing unrelated families. Many informational searches for specific marks still land on the same remixicon.com browser the project ships as its primary entry. The project distributes SVG, web font, and sprite options and documents packages for common frameworks; licensing is the Apache License, Version 2.0, as stated in the official repository. Visit https://remixicon.com/ to search and copy assets next to your other tools.

What you can do with Remix Icon

Matches how remixicon.com ranks: brand queries and generic UI intents share one search surface on the root site.

  1. Cover charts, menus, and events in one catalog: Head informational searches for bar chart, drop-down, arrow-in-circle, and event-style marks resolve in the same Remix grid; search once instead of stitching multiple packs.

  2. Switch between outlined and filled: Use the same name in two styles so active and default states stay aligned across components.

  3. Search on a single neutral system: Browse one catalog before you split the repo between multiple line packs.

  4. Hand off names that map to packages: Icon strings on the site align with common npm and Figma plugin flows described upstream.

  5. Scale on the documented grid: The 24px base keeps small toolbar and list rows legible when you export at standard densities.

  6. Pair with accessible labels: Decorative and control icons still need text or labels in the host pattern; the library supplies shapes only.

How to browse icons with Remix Icon

Keep exports aligned with the stack you already ship.

  1. List slots before you search

    Write navigation, action, and object needs so you are not re-solving the same glyph in critique.

  2. Lock default sizes per surface

    Tie 16px, 20px, and 24px usage to specific layout tiers so build and Figma match.

  3. Match package and design versions

    When a release renames an icon, update tokens and the library in one change set.

  4. Test at the smallest target

    Clarity in dense tables matters more than the icon at poster scale.

Tips for dual-style systems

Outlined and filled pairs need rules, not two arbitrary picks per screen.
  • 01

    Do not mix families in one bar

    If you need contrast, use fill weight within Remix instead of a second set.

  • 02

    Name objects and verbs clearly

    Search, design spec, and import paths stay aligned when copy uses the same terms.

  • 03

    Store sprite or font choice in the readme

    SVG, sprite, and webfont paths behave differently; document what production uses.

  • 04

    Quarantine one-off custom marks

    Keep marketing illustrations out of the main sprite to protect bundle size.

Who this set works well for

Teams that want one Apache-licensed default across design and code.

  1. Product and system designers: Standardize outlined and filled usage in one file the engineering team can mirror.

  2. Full-stack and component authors: Ship Storybook and docs with names that match the website and published packages.

  3. Indie and OSS projects: Use a permissive license and a single catalog so contributors are not split across folders.

  4. Figma users with the official plugin: Use the community workflow the project links to so libraries stay in sync with releases.

Benefits of using Remix Icon

One neutral system cuts debate when the whole team points at the same search page.

  • Predictable look across features

    Shared construction between variants keeps admin and consumer surfaces related.

  • Faster from search to import

    A single large index shortens the path from a missing icon to a named file in the repo.

  • Room to grow with releases

    New icons arrive with a public cadence instead of a private “misc” directory.

  • Ecosystem documentation

    Framework and deployment notes on the project site support real adoption, not one-off pastes.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.