Examples | IcoFont

Three ways to use an icon

Pick the one that fits your project. Every icon works in all three.

Web fontOne stylesheet, then a class per icon. Best when you use many icons across a site.SVGCopy or download any icon. No extra files; it takes on the text colour around it.ComponentsReady-made React, Vue, Svelte and Angular components, sized and coloured like text.

Web font

Add the stylesheet

Download the package, copy its icofont folder into your project and link the stylesheet. Each icon is an <i> with the icon’s class.

Home

HTML

<!-- once, in <head> -->
<link rel="stylesheet" href="icofont/icofont.min.css">

<!-- anywhere -->
<i class="icofont-home"></i> Home

Sizes

Icons are text, so they follow font-size. Use icofont-xs to icofont-lg for steps around the text size, or icofont-2x to icofont-10x for multiples of it.

HTML

<i class="icofont-dart icofont-xs"></i> <!-- also sm, md, lg -->
<i class="icofont-dart icofont-2x"></i> <!-- 2x to 10x -->
<i class="icofont-dart icofont-5x"></i>

List bullets

Add icofont-ul to a list to replace its bullets with icons.

Aligned to a 24px grid
Free for personal and commercial use
Web font, SVG and components

HTML

<ul class="icofont-ul">
  <li><i class="icofont-check"></i> Aligned to a 24px grid</li>
  <li><i class="icofont-check"></i> Free for personal and commercial use</li>
</ul>

Rotate and flip

Turn an icon in 90° steps with icofont-rotate-*, or mirror it with icofont-flip-horizontal and icofont-flip-vertical.

normal

rotate-90

rotate-180

rotate-270

flip-horizontal

flip-vertical

HTML

<i class="icofont-arrow-right icofont-rotate-90"></i>
<i class="icofont-arrow-right icofont-rotate-180"></i>
<i class="icofont-airplane-alt icofont-flip-horizontal"></i>
<i class="icofont-airplane-alt icofont-flip-vertical"></i>

Spin and pulse

For loading states. Both stop for people who turn on reduced motion.

spin

pulse

HTML

<i class="icofont-spinner icofont-spin"></i>  <!-- smooth -->
<i class="icofont-spinner icofont-pulse"></i> <!-- 8 steps per turn -->

Fixed width and borders

icofont-fw gives every icon the same width, so menu labels line up. icofont-border adds a light frame.

HTML

<!-- same width for every icon, so labels line up -->
<i class="icofont-home icofont-fw"></i> Home
<i class="icofont-search icofont-fw"></i> Search

<i class="icofont-light-bulb icofont-2x icofont-border"></i>

Duotone

Add icofont-duotone next to the icon class. Find them under Style: Duotone on the icons page.

HTML

<i class="icofont-duotone icofont-add-users"></i>

<!-- the second tone is the same colour at 60%; set the colour as usual -->
<i class="icofont-duotone icofont-apply" style="color: #7c3aed"></i>

Your own font

Ship only the icons you use, built in the Composer. Keep the icofont prefix and class names stay the same as in the full set, so switching needs no code changes.

PickOpen the Composer and click the icons you need, or add a whole category.
Set it upName the font, keep or change the class prefix, choose formats.
Download fontA zip with only your icons: CSS, fonts and a demo page.

Inside the zip

my-icofont/
  my-icofont.css       # readable
  my-icofont.min.css   # link this one
  fonts/               # the formats you picked
  demo.html            # every icon in your font

SVG

Inline SVG

Open any icon and press Copy SVG. It’s drawn on a 24×24 grid and filled with currentColor, so it takes the colour of the text around it. Change width and height to resize it.

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.65 10.25l-2.18-1…" /></svg>

In CSS

Choose Copy Data URL in an icon’s menu. Used as a mask, the icon follows the text colour, as in both buttons here; as a background it keeps its own colour.

CSS

/* Takes the text colour: the icon is a mask over a coloured box */
.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,…") center / contain no-repeat;
  mask: url("data:image/svg+xml,…") center / contain no-repeat;
}

/* Or as a fixed-colour image */
.logo-home {
  background: url("data:image/svg+xml,…") center / contain no-repeat;
}

SVG and PNG files

Both are in each icon’s menu, next to Copy SVG. Files are named after the icon, like icofont-home.svg.

Download SVGFor design tools and build pipelines.

Download PNG512×512 with a transparent background.

Components

React, Vue, Svelte, Angular

Open any icon and pick your framework under Use in code. Each is one file with no dependencies. Icons are 1em and currentColor, so set font-size and color to style them.

IcofontHome.jsx

export const IcofontHome = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" {...props}>
    <path d="M21.65 10.25l-2.18-1…" />
  </svg>
);

Usage

import { IcofontHome } from "./IcofontHome";

<IcofontHome style={{ fontSize: 24, color: "#7c3aed" }} />

Duotone components

Duotone icons export the same way. The second layer is the same colour at 60% opacity.

IcofontDuotoneAddUsers.jsx

export const IcofontDuotoneAddUsers = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" {...props}>
    <path d="M18.35 11.3c1.62 0.2…" />
    <path d="M12.83 11.17c1.63 0 …" opacity={0.6} />
  </svg>
);

Usage

import { IcofontDuotoneAddUsers } from "./IcofontDuotoneAddUsers";

<IcofontDuotoneAddUsers style={{ fontSize: 24, color: "#7c3aed" }} />

Use icons as a font, SVG or component

Web font

SVG

Components