Docs

Use your icons

Finding icon names

Every icon has a short name. Here's where to find it and how it's written.

On this page

    Copy it from the icon page

    Open any icon in the Library. Under the drawing you'll find its ready-made snippet with a Copy button. Paste it into your page and you're done.

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

    This is how the snippet looks on each icon page.

    Search in your language

    Search works in English, Spanish, French, German, Portuguese and Japanese. Type the food the way you say it. "palta" finds the avocado, and so do all of these:

    avocado · EN palta, aguacate · ES avocat · FR Avocado · DE abacate · PT アボカド · JA

    Tip. Whatever language you search in, the icon's name in your code is always the English one.

    How names are written

    • They start with ico-.
    • They're all lowercase, in English.
    • Words are joined with underscores: ico-croque_monsieur.

    Renamed icons keep working

    Sometimes we give an icon a better name. The old name keeps working, so you never have to go back and fix your site.

    A few names to try

    ico-avocado
    ico-croissant
    ico-ramen
    ico-sushi
    ico-strawberry
    ico-taco

    Something unclear? Tell us →