Iconoir

https://iconoir.com/docs
Admin
Iconoir is an open-source library offering over 1500 unique SVG icons, designed on a 24x24 pixels...
Tokens:7,447
Snippets:91
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Installation Commands

Source: https://iconoir.com/docs/packages/iconoir-react

Commands to install the iconoir-react package using npm, yarn, or pnpm.

```bash
npm i iconoir-react
```

```bash
yarn add iconoir-react
```

```bash
pnpm add iconoir-react
```

--------------------------------

### Install @iconoir/vue with npm, Yarn, or pnpm

Source: https://iconoir.com/docs/packages/iconoir-vue

Install the @iconoir/vue package using your preferred package manager. Choose one command based on your environment.

```bash
npm i @iconoir/vue
```

```bash
yarn add @iconoir/vue
```

```bash
pnpm add @iconoir/vue
```

--------------------------------

### Basic Icon Usage

Source: https://iconoir.com/docs/packages/iconoir-react

Example of importing and rendering an icon component in a React application.

```javascript
import { Iconoir } from 'iconoir-react';
import React from 'react';

function App() {
  return <Iconoir />;
}

export default App;
```

--------------------------------

### Install iconoir-react-native with Yarn

Source: https://iconoir.com/docs/packages/iconoir-react-native

Install the iconoir-react-native package and its peer dependency react-native-svg using Yarn.

```bash
yarn add iconoir-react-native react-native-svg
```

--------------------------------

### Install iconoir-react-native with npm

Source: https://iconoir.com/docs/packages/iconoir-react-native

Install the iconoir-react-native package and its peer dependency react-native-svg using npm.

```bash
npm i iconoir-react-native react-native-svg
```

--------------------------------

### Install Iconoir with npm, Yarn, pnpm, or Bun

Source: https://iconoir.com/docs/introduction

Install the iconoir NPM package using your preferred package manager. The commands are equivalent alternatives; choose one.

```bash
npm i iconoir
```

```bash
yarn add iconoir
```

```bash
pnpm add iconoir
```

```bash
bun add iconoir
```

--------------------------------

### Install iconoir_flutter with flutter pub add

Source: https://iconoir.com/docs/packages/iconoir-flutter

Adds the iconoir_flutter package to a Flutter project using the flutter pub add command.

```bash
flutter pub add iconoir_flutter
```

--------------------------------

### Use Iconoir in SwiftUI

Source: https://iconoir.com/docs/introduction

Import SwiftUI and Iconoir, then use Iconoir.bell.asImage in a SwiftUI view. The example sets the foreground color and font size.

```swift
import SwiftUI
import Iconoir

struct ContentView: View {
    var body: some View {
        Iconoir.bell.asImage
            .foregroundColor(.blue)
            .font(.system(size: 24))
    }
}
```

--------------------------------

### Use an Iconoir icon in HTML

Source: https://iconoir.com/docs/introduction

Use an icon by applying the class 'iconoir-' followed by the icon name. The class must always start with 'iconoir-'.

```html
<i class="iconoir-hand-brake"></i>
```

--------------------------------

### Import an Iconoir SVG icon

Source: https://iconoir.com/docs/introduction

Import an SVG icon from the iconoir package. The example imports the iconoir.svg file from the icons directory.

```javascript
import Iconoir from 'iconoir/icons/iconoir.svg';
```

--------------------------------

### Set SVG properties as props on Iconoir

Source: https://iconoir.com/docs/packages/iconoir-vue

Icons accept standard SVG properties as optional props. Example shows setting color, height, and width.

```html
<Iconoir color="red" height="36" width="36" />
```

--------------------------------

### Using IconoirProvider to set default icon props

Source: https://iconoir.com/docs/packages/iconoir-react-native

Wrap your components in IconoirProvider to set default icon props for all icons inside it. The example sets color, strokeWidth, width, and height.

```jsx
import { Check, IconoirProvider } from 'iconoir-react-native';

return (
  <IconoirProvider
    iconProps={{
      color: '#AAAAAA',
      strokeWidth: 1,
      width: '1em',
      height: '1em',
    }}
  >
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
);
```

--------------------------------

### Use IconoirProvider to set default icon props

Source: https://iconoir.com/docs/packages/iconoir-vue

Wrap your icons in IconoirProvider to set default props for all icons inside. The example sets color, stroke-width, width, and height for all icons within the provider.

```vue
<script setup>
  import { IconoirProvider, Check } from '@iconoir/vue';
</script>

<template>
  <IconoirProvider
    :icon-props="{
      'color': '#AAAAAA',
      'stroke-width': 1,
      'width': '1em',
      'height': '1em',
    }"
  >
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
</template>
```

--------------------------------

### Include Iconoir CSS from CDN

Source: https://iconoir.com/docs/introduction

Link to the Iconoir CSS file hosted on jsDelivr to use the iconoir CSS classes.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />
```

--------------------------------

### Using IconoirProvider

Source: https://iconoir.com/docs/packages/iconoir-react

Use IconoirProvider to set default icon properties for all icons within a component tree.

```javascript
import { Check, IconoirProvider } from 'iconoir-react';

return (
  <IconoirProvider
    iconProps={{
      color: '#AAAAAA',
      strokeWidth: 1,
      width: '1em',
      height: '1em',
    }}
  >
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
);
```

--------------------------------

### Use Iconoir in UIKit

Source: https://iconoir.com/docs/introduction

Import UIKit and Iconoir, then create a UIImageView with an Iconoir icon as a UIImage.

```swift
import UIKit
import Iconoir

let imageView = UIImageView(image: Iconoir.bell.asUIImage)
```

--------------------------------

### Basic usage of Iconoir component

Source: https://iconoir.com/docs/packages/iconoir-vue

Import the Iconoir component and use it in your template. The component renders an SVG icon.

```vue
<script setup>
  import { Iconoir } from '@iconoir/vue';
</script>

<template>
  <Iconoir />
</template>
```

--------------------------------

### Basic usage of Iconoir component

Source: https://iconoir.com/docs/packages/iconoir-react-native

Import the Iconoir component and render it inside a React Native View. The component accepts optional react-native-svg props.

```jsx
import { Iconoir } from 'iconoir-react-native';
import React from 'react';
import { View } from 'react-native';

function App() {
  return (
    <View>
      <Iconoir />
    </View>
  );
}

export default App;
```

--------------------------------

### Use Iconoir widget in a Flutter app

Source: https://iconoir.com/docs/packages/iconoir-flutter

Imports the iconoir_flutter package and displays the Iconoir widget in a MaterialApp. The default color is 'currentColor' and default width/height are '1.5em'.

```dart
import 'package:flutter/material.dart';
import 'package:iconoir_flutter/iconoir_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({ super.key });

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({ super.key });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: const Iconoir(),
      ),
    );
  }
}

```

--------------------------------

### Passing props to Iconoir

Source: https://iconoir.com/docs/packages/iconoir-react-native

Icons can take any react-native-svg properties as optional props, such as color, height, and width.

```jsx
<Iconoir color="red" height={36} width={36} />;
```
Tokens:
Raw