Iconoir Documentation

Import icons from iconoir-solid-js and use them as components. Icons accept standard SVG properties as optional props.

Default prop values:

• color: "currentColor"
• width: "1.5em"
• height: "1.5em"
• stroke-width: 1.5

Install the iconoir-solid-js package using your preferred package manager.

npm i iconoir-solid-js
# or
yarn add iconoir-solid-js
# or
pnpm add iconoir-solid-js

Iconoir is integrated into Framer. To use the icons in your project:

1. Open the top menu in Framer.
2. Navigate to Insert > Graphics > Iconoir.
3. Once added, you can browse and switch between different icons using the right sidebar in the Framer editor.

Import package:iconoir_flutter/iconoir_flutter.dart to access the icon widgets. Icons are exported as Flutter widgets based on flutter_svg.

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

// Example usage of an icon widget
const Iconoir() 

To add Iconoir-swift to your Xcode project:

1. Navigate to File > Swift Packages > Add Package Dependency... in Xcode.
2. Enter the repository URL: https://github.com/iconoir-icons/iconoir-swift.git.
3. Choose your desired branch or version.
4. Select your target and click Finish.

Icon names are designed to be object-oriented rather than action-oriented. Avoid using verbs that describe an action unless the icon represents a physical movement.

Correct (Object-Oriented):

• user-minus (describes the state/object)

Incorrect (Action-Oriented):

• remove-user (describes the action)

Exception (Physical Actions): Icons representing physical movement or actions can embed the action in the name:

• walking
• running
• vehicle-fast
• crane-lifting

Add the iconoir_flutter package to your Flutter project using the Flutter CLI.

flutter pub add iconoir_flutter

Iconoir icons follow a specific hierarchical naming structure to ensure consistency. The base pattern is:

[Object]-[Modifier]-[Container]

• [Object]: The primary subject of the icon (e.g., user).
• [Modifier]: A secondary element or unique addition (e.g., -minus, -warning).
• [Container]: A shape that holds the object (e.g., -square, -circle). Note that if a shape is an integral part of the object itself, it is not treated as a container.

Example distinction:

• user-minus: user is the object, minus is the modifier.
• minus-square: minus is the object, square is the container.

You can manage launch screen assets using the Xcode interface:

1. Open your Flutter project's Xcode workspace using the command: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, select Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

You can install the core iconoir package using your preferred package manager to access the SVG icons directly.

npm i iconoir
# or
yarn add iconoir
# or
pnpm add iconoir
# or
bun add iconoir