Docs

Use your icons

The CDN line

One line in your page, then any icon by name, anywhere.

On this page

    Add the line once

    Copy your kit's line from your Profile and paste it inside the <head> of your site. That's the top part of your HTML. If you use a site builder, look for a setting called "Custom code" or "Head code".

    HTML
    <link rel="stylesheet" href="https://cdn.iconi.to/k_your_kit/iconito.css">

    k_your_kit is a placeholder. Your real line has your own kit code in it, so always copy it from your Profile.

    Pro

    The CDN line is part of Pro. On a free account you can still download every icon as a PNG.

    Write an icon

    Write an <i> tag with two classes: ico, then the icon's name. A class is a label that tells the page how to style something.

    In React and Vue

    Same line, nothing to install. In React, write className instead of class.

    <i class="ico ico-avocado"></i>

    Size

    Icons are 1em, which means "as big as the text around them". Make the text bigger and the icon follows. To set one size, use font-size.

    HTML
    <i class="ico ico-avocado"
   style="font-size:16px"></i>
<i class="ico ico-avocado"
   style="font-size:24px"></i>
<i class="ico ico-avocado"
   style="font-size:48px"></i>
    Result
    16px
    24px
    48px

    Tip. Set font-size on a menu or list, and every icon inside it gets that size.

    Alignment

    Icons sit on the text baseline, the invisible line letters stand on. So they line up with words without any extra CSS.

    Inside a button

    HTML
    <button>
  <i class="ico ico-avocado"
     aria-hidden="true"></i>
  Add avocado
</button>
    Result
    Add avocado

    Inside a sentence

    HTML
    <p>Spread <i class="ico ico-avocado"
  aria-hidden="true"></i> avocado
on warm toast.</p>
    Result

    Spread avocado on warm toast.

    Accessibility

    Screen readers read the page out loud for people who can't see it. Tell them which icons to skip and which to read.

    • Decorative (the words next to it already say it): add aria-hidden="true".
    • Meaningful (the icon is the only label): add role="img" and aria-label="Avocado".
    HTML
    <!-- Decorative: the word is right there -->
<i class="ico ico-avocado" aria-hidden="true"></i> Avocado

<!-- Meaningful: the icon is the only label -->
<i class="ico ico-avocado" role="img" aria-label="Avocado"></i>

    The Mini collection

    Mini icons are simpler drawings made to stay clear at 24px, for menus and buttons. Add ico-mini to switch.

    HTML
    <!-- Classic -->
<i class="ico ico-burger"></i>

<!-- Mini -->
<i class="ico ico-mini ico-burger"></i>
    Result at 24px
    Classic
    Mini

    Image URLs

    Some places can't load the CDN line, like emails or a CMS that only takes images. Use the icon's own address instead.

    • …/k_your_kit/avocadogives you an SVG, sharp at any size.
    • …/k_your_kit/avocado?format=pnggives you a small 64px PNG, the safe choice for emails.
    HTML
    <!-- On a web page -->
<img src="https://cdn.iconi.to/k_your_kit/avocado"
     alt="Avocado" width="48" height="48">

<!-- In an email -->
<img src="https://cdn.iconi.to/k_your_kit/avocado?format=png"
     alt="Avocado" width="48" height="48">

    When icons don't show

    Go through these four in order. One of them is almost always the reason.

    Something unclear? Tell us →