DOCSEARCHbyAlgolia
Submit Docs

Remix Icon

repository·master·Indexed 27 days ago

https://github.com/remix-design/remixicon

An open-source set of neutral-style system symbols for designers and developers. Version 4.9.1 provides icons in 'Outlined' and 'Filled' styles on a 24x24 grid. Available as a webfont via npm or CDN, SVG files, SVG sprites, and dedicated component packages for React (@remixicon/react) and Vue 3 (@remixicon/vue).

Tokens
2.1K
Snippets
12
Records
12
Agent score
44%

What's inside Remix Icon

  2. Use Remix Icon via CDN

    master

    The fastest way to use the Webfont is to include the CSS link in your HTML <head>. You can specify any historical version by changing the version number in the URL.

    <link
  href="https://cdn.jsdelivr.net/npm/remixicon@4.9.0/fonts/remixicon.css"
  rel="stylesheet"
/>

  3. Use Remix Icon via SVG Sprite

    master

    Download remixicon.symbol.svg and add it to your project. You can then reference icons using the <use> tag. This method allows you to customize size and color via CSS.

    <svg class="remix">
  <use xlink:href="path/to/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>
    .remix {
  width: 24px;
  height: 24px;
  fill: #333;
}

  4. Use Remix Icon SVG Sprites

    master

    Download the remixicon.symbol.svg file and use the <use> element to reference icons by their ID. The ID follows the pattern #ri-{name}-{style}.

    <svg class="remix">
  <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

<style>
.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}
</style>

  5. Install and use Remix Icon Webfont

    master

    You can use Remix Icon as a webfont via npm, CDN, or manual download.

    Installation via npm

    npm install remixicon --save

    Then import the CSS in your main entry point (e.g., main.js):

    import 'remixicon/fonts/remixicon.css'

    Installation via CDN

    Add this link to your HTML <head>:

    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.9.0/fonts/remixicon.css" rel="stylesheet" />

    Usage

    Use the <i> tag with the class name pattern ri-{name}-{style}.

    • -line for outlined style.
    • -fill for filled style.

    Example:

    <i class="ri-admin-line"></i> <i class="ri-admin-fill"></i>

  6. Install and use Remix Icon in Vue 3

    master

    Install the @remixicon/vue package and import icon components. Components accept size, color, and className props.

    npm install @remixicon/vue
# or
yarn add @remixicon/vue
# or
pnpm install @remixicon/vue
    <script setup lang="ts">
import { RiHeartFill } from "@remixicon/vue";
</script>

<template>
  <RiHeartFill size="36px" color="red" className="my-icon" />
</template>

  8. Install and use Remix Icon in React

    master

    Install the @remixicon/react package and import specific icon components. Components accept size, color, and className props.

    npm install @remixicon/react
# or
yarn add @remixicon/react
# or
pnpm install @remixicon/react
    import { RiHeartFill } from "@remixicon/react";

const MyComponent = () => {
  return (
    <RiHeartFill
      size={36} // set size
      color="red" // set color
      className="my-icon" // add custom class
    />
  );
};

  9. Install and use @remixicon/vue

    master

    Install the Vue 3 component package:

    npm install @remixicon/vue

    Import icon components and use them in your template. You can pass size, color, and className props.

    <script setup lang="ts">
import { RiHeartFill } from "@remixicon/vue";
</script>

<template>
  <RiHeartFill size="36px" color="red" className="my-icon" />
</template>

  10. Install and use @remixicon/react

    master

    Install the React component package:

    npm install @remixicon/react

    Import specific icon components (using PascalCase) and use them as React components. You can pass size, color, and className props.

    import { RiHeartFill } from "@remixicon/react";

const MyComponent = () => {
  return (
    <RiHeartFill
      size={36} // set custom `width` and `height`
      color="red" // set `fill` color
      className="my-icon" // add custom class name
    />
  );
};

  11. Resize Remix Icon Webfonts

    master

    Icons inherit the font-size of their parent container. You can use built-in utility classes to adjust the size relative to the inherited size, or use ri-fw for a fixed width.

    Available size classes:

    • ri-xxs (0.5em)
    • ri-xs (0.75em)
    • ri-sm (0.875em)
    • ri-1x (1em)
    • ri-lg (1.3333em)
    • ri-xl (1.5em)
    • ri-2x (2em)
    • ... up to ri-10x (10em)
    <div style="font-size: 24px;">
  <i class="ri-admin-line ri-fw"></i>
  <i class="ri-admin-line ri-xxs"></i>
  <i class="ri-admin-line ri-xs"></i>
  <i class="ri-admin-line ri-sm"></i>
  <i class="ri-admin-line ri-1x"></i>
  <i class="ri-admin-line ri-lg"></i>
  <i class="ri-admin-line ri-xl"></i>
  <i class="ri-admin-line ri-2x"></i>
</div>

  12. Resize Webfont icons with utility classes

    master

    Remix Icon provides built-in utility classes to change icon size using em relative units. You can also use ri-fw to give the icon a fixed width, which is useful for list layouts.

    Common size classes include:

    • ri-xxs (0.5em)
    • ri-xs (0.75em)
    • ri-sm (0.875em)
    • ri-1x (1em)
    • ri-lg (1.3333em)
    • ri-xl (1.5em)
    • ri-2x (2em)
    • ... up to ri-10x (10em)
    <div style="font-size: 24px;">
  <i class="ri-admin-line ri-fw"></i>
  <!-- fixed width -->
  <i class="ri-admin-line ri-xxs"></i>
  <!-- 0.5em -->
  <i class="ri-admin-line ri-xs"></i>
  <!-- 0.75em -->
  <i class="ri-admin-line ri-sm"></i>
  <!-- 0.875em -->
  <i class="ri-admin-line ri-1x"></i>
  <!-- 1em -->
  <i class="ri-admin-line ri-lg"></i>
  <!-- 1.3333em -->
  <i class="ri-admin-line ri-xl"></i>
  <!-- 1.5em -->
  <i class="ri-admin-line ri-2x"></i>
  <!-- 2em -->
  <i class="ri-admin-line ri-3x"></i>
  <!-- ... -->
  <i class="ri-admin-line ri-10x"></i>
</div>