Uwarp

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.

  1. Do not mix families in one bar: If you need contrast, use fill weight within Remix instead of a second set.
  2. Name objects and verbs clearly: Search, design spec, and import paths stay aligned when copy uses the same terms.
  3. Store sprite or font choice in the readme: SVG, sprite, and webfont paths behave differently; document what production uses.
  4. 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.

  1. Predictable look across features: Shared construction between variants keeps admin and consumer surfaces related.
  2. Faster from search to import: A single large index shortens the path from a missing icon to a named file in the repo.
  3. Room to grow with releases: New icons arrive with a public cadence instead of a private “misc” directory.
  4. Ecosystem documentation: Framework and deployment notes on the project site support real adoption, not one-off pastes.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Icons & Graphics.

View all Icons & Graphics