> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> Icon Component System Documentation

<Frame>
  <img src="https://mintcdn.com/robojuice/4d3H4mEH-baBRDcc/images/remix-icons-site.png?fit=max&auto=format&n=4d3H4mEH-baBRDcc&q=85&s=94fbd0dd05aa1ce55b5cd9fca772ef87" width="1600" height="1349" data-path="images/remix-icons-site.png" />
</Frame>

The icon component system renders icons from the [RemixIcon library](https://remixicon.com/). It supports optional customization, such as filling the icon for a solid appearance.

<Info>RemixIcon is licensed based on the Apache License and all rights of products are reserved for RemixIcon.</Info>

***

## Features

<CardGroup cols={2}>
  <Card title="Extensive Icon Options" icon="square-1">
    Choose from over 1000 icons in the RemixIcon library for any design need.
  </Card>

  <Card title="Customizable Appearance" icon="square-2">
    Supports filled (solid) styles and flexible size and color customization.
  </Card>

  <Card title="Consistent Naming" icon="square-3">
    Matches RemixIcon naming conventions for intuitive use and recognition.
  </Card>

  <Card title="Integration Ready" icon="square-4">
    Easily combine icons with components like buttons to enhance functionality.
  </Card>
</CardGroup>

***

## Icons List

The full list of available icons can be found on the [RemixIcon website](https://remixicon.com/). The `IconDownload` component is one example from this collection, but you can use other icons by importing and rendering them in a similar way.

Each icon is name the same as the Remix version but without `-line` or `-fill` at the end. For example, `arrow-up-line` and `arrow-up-fill` will share the component name of `<IconArrowUp />`.

***

# Importing Icons from Node Modules

Import icons from `"@robojuice/velure-ui/src/icons"`.

## Example

```vue theme={null}
<script setup>
import { IconDownload } from "@robojuice/velure-ui/src/icons";
</script>

<template>
  <IconDownload />
</template>
```

### Basic Usage

To use the `IconUpload` component, simply include it in your Vue component:

```vue theme={null}
<IconUpload />
```

### Filled Icon

To render the icon in a filled (solid) style:

```vue theme={null}
<IconUpload fill />
```

***

## Props

<ParamField path="fill" type="boolean" default="false">
  Applies a filled (solid) style to the icon.
</ParamField>

***

### Integrating Icons in Buttons

You can use the icons with other components, such as buttons:

```vue theme={null}
<Button>
  <template #iconLeft>
    <IconUpload />
  </template>
  Upload
</Button>
```

***

## Notes

* Make sure the RemixIcon library is installed and properly configured in your project.
* To use custom icons, you may need to adjust styling (e.g., size, color) with CSS or inline styles.
* Refer to the [RemixIcon documentation](https://remixicon.com/) for additional options and examples.