GitHub
  1. Icon Monks
  2. Get started

Getting started with Icon Monks

Pick the setup that matches your project. Every option uses the same 5,518 icons and six weights, so you can mix platforms freely.

1. Choose your platform

React icons

Typed, tree-shakeable components with an IconContext for defaults.

npm i @icon-monks/react

Vue icons

Vue 3 components with provide/inject defaults.

npm i @icon-monks/vue

Web components

An element for plain HTML, Angular, Svelte, Astro and WordPress.

npm i @icon-monks/web

Icon font

OTF and WOFF2 fonts with CSS classes in five weights.

npm i @icon-monks/font

SVG icons

Raw SVG files, sprites, metadata and a toSvg() helper.

npm i @icon-monks/core

Flutter icons

IconData constants backed by bundled fonts.

flutter pub add icon_monks

SwiftUI icons

A Swift package with vector assets for SwiftUI and UIKit.

.package(url: "https://github.com/designmonks/icon-monks", from: "0.3.0")

Android icons

Jetpack Compose ImageVectors and XML VectorDrawables.

implementation("com.github.designmonks:icon-monks:v0.3.0")

2. No build step? Link a file

Every icon is served as a standalone SVG, and the icon font ships with a ready-made stylesheet:

<link rel="stylesheet" href="https://designmonks.github.io/icon-monks/packages/font/dist/index.css">
<i class="im im-house"></i>

<img src="https://designmonks.github.io/icon-monks/svg/bold/heart-bold.svg" alt="" width="24" height="24">

3. Pick a weight

Thin, light, regular and bold are outlines with 8, 12, 16 and 24-unit strokes on a 256-unit grid. Fill is solid and duotone layers the outline over a 20% tint. Regular is the default; use bold for small sizes and fill for selected states.

4. Find icons

Search all 5,518 icons by name or tag in the icon browser, or explore 31 categories. Each icon has its own page with every weight, downloads and code for each platform.