Iconify

App · 6 actions

Find the right icon among more than 200,000 open-source icons from over 200 icon sets, such as Material Design Icons, Font Awesome, Tabler and Fluent Emoji, and get it as SVG code, an image link or a data URL in the size and colour you need, with its licence and a credit line. No account or API key is required.

Actions

ActionWhat it does
Get CSS for iconsGet CSS that shows icons on a web page with a plain <span>, for a site builder's custom code box or a stylesheet, with the HTML to place each icon.
Get iconGet an icon at the size and colour you want, turned or flipped if you like: its SVG code, a ready-to-use image link, a data URL and an <img> tag, with the licence and a credit line to use it correctly.
List icon setsList Iconify's icon sets with how many icons each has, its licence and author, whether it allows commercial use, sample icons and when it was last updated.
List icons in a setList the icons of one icon set, or of one of its categories such as Arrows or Weather, with preview links, the set's categories and its licence.
Search iconsFind icons by what they show, across more than 200 open-source icon sets or only the ones you pick: each icon's id, a preview link and its set's licence.
Suggest search wordsFind the words icon names actually use, to search icons with the right one: words that start with what you type, or that start or end with it.

Get CSS for icons

Get CSS that shows icons on a web page with a plain <span>, for a site builder's custom code box or a stylesheet, with the HTML to place each icon. Up to 100 icons from any sets.

Inputs

IconsiconslistRequired
Icon ids such as mdi:home, separated by commas or on lines of their own, or a list from an earlier step. Bare names such as home use the icon set picked.
Icon seticon_settext
The set for icons given by name only, such as home.Default: mdi.
Colourcolortext
A hex code such as #1E88E5, or a colour name such as red. Leave it as currentColor for icons that take the colour of the text around them.Default: currentColor.

Outputs

classeslist
colortext
countnumber
csstext
htmltext
not_foundlist
Example output
{
  "classes": [
    {
      "class_name": "icon--mdi icon--mdi--home",
      "html": "<span class=\"icon--mdi icon--mdi--home\"></span>",
      "icon_id": "mdi:home"
    }
  ],
  "color": null,
  "count": 1,
  "css": ".icon--mdi {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  background-color: currentColor;\n  -webkit-mask-image: var(--svg);\n  mask-image: var(--svg);\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.icon--mdi--home {\n  --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E\");\n}\n",
  "html": "<span class=\"icon--mdi icon--mdi--home\"></span>",
  "not_found": []
}

Get icon

Get an icon at the size and colour you want, turned or flipped if you like: its SVG code, a ready-to-use image link, a data URL and an <img> tag, with the licence and a credit line to use it correctly. Save it as an SVG file to attach if you need to.

Inputs

Icon seticon_settext
The set the icon is from. Not needed when the icon is given as a full id such as mdi:home.Default: mdi.
IconicontextRequired
The icon's name, such as home, or its full id from Search icons, such as mdi:home. A link to the icon on iconify.design works too.
Size (pixels)sizenumber
The icon's height in pixels; its width follows its shape. 24 by default.From 1 to 4096. Default: 24.
Colourcolortext
A hex code such as #1E88E5, or a colour name such as red. Leave it as currentColor to keep the text colour of wherever you paste the SVG (an image link then shows black). Icons with their own colours, such as emoji and logos, keep them.Default: currentColor.
Rotationrotatetext
Turn the icon.One of: 0 (No rotation), 90 (90° clockwise), 180 (180°), 270 (270° clockwise (90° anticlockwise)). Default: 0.
Flipfliptext
Mirror the icon.One of: none (No flip), horizontal (Flip horizontally (mirror left to right)), vertical (Flip vertically (upside down)), both (Flip both ways). Default: none.
Keep the empty space around itkeep_canvastrue/false
Turn on when importing into a design tool such as Sketch or Figma, which otherwise crops the icon's padding and makes icons hard to line up.Default: false.
Also save the icon as an SVG filesave_as_filetrue/false
Turn on when a later step needs the file itself, to attach to an email or upload to storage.Default: false.

Outputs

attributiontext
author_nametext
author_urltext
colortext
commercial_use_allowedtrue/false
content_typetext
data_urltext
document_reftext
documentslist
file_size_bytesnumber
file_urltext
fliptext
heightnumber
icon_idtext
icon_settext
icon_set_nametext
image_tagtext
image_urltext
license_spdxtext
license_titletext
license_urltext
multicolortrue/false
nametext
page_urltext
rotatenumber
saved_as_filetrue/false
svgtext
widthnumber
Example output
{
  "attribution": "\"home\" icon from Material Design Icons by Pictogrammers, licensed under Apache 2.0 (https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).",
  "author_name": "Pictogrammers",
  "author_url": "https://github.com/Templarian/MaterialDesign",
  "color": "#1e88e5",
  "commercial_use_allowed": true,
  "content_type": "",
  "data_url": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMWU4OGU1IiBkPSJNMTAgMjB2LTZoNHY2aDV2LThoM0wxMiAzTDIgMTJoM3Y4eiIvPjwvc3ZnPg==",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "flip": "none",
  "height": 48,
  "icon_id": "mdi:home",
  "icon_set": "mdi",
  "icon_set_name": "Material Design Icons",
  "image_tag": "<img src=\"https://api.iconify.design/mdi/home.svg?height=48&amp;color=%231e88e5\" width=\"48\" height=\"48\" alt=\"home icon\">",
  "image_url": "https://api.iconify.design/mdi/home.svg?height=48&color=%231e88e5",
  "license_spdx": "Apache-2.0",
  "license_title": "Apache 2.0",
  "license_url": "https://github.com/Templarian/MaterialDesign/blob/master/LICENSE",
  "multicolor": false,
  "name": "home",
  "page_url": "https://icon-sets.iconify.design/mdi/home/",
  "rotate": 0,
  "saved_as_file": false,
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\"><path fill=\"#1e88e5\" d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z\"/></svg>",
  "width": 48
}

List icon sets

List Iconify's icon sets with how many icons each has, its licence and author, whether it allows commercial use, sample icons and when it was last updated. Narrow by kind of set or by name.

Inputs

Kind of icon setcategorytext
Only sets of one kind, such as Emoji or Logos.
Name containsname_containstext
Only sets whose name contains this, such as awesome.
Only sets free for commercial usecommercial_use_onlytrue/false
Leave out sets whose licence forbids commercial use.Default: false.
Include retired setsinclude_retiredtrue/false
Also list sets that are no longer maintained or were replaced by a newer version.Default: false.

Outputs

countnumber
icon_set_idslist
icon_setslist
total_iconsnumber
Example output
{
  "count": 1,
  "icon_set_ids": [
    "mdi"
  ],
  "icon_sets": [
    {
      "attribution": "Material Design Icons by Pictogrammers, licensed under Apache 2.0 (https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).",
      "author_name": "Pictogrammers",
      "author_url": "https://github.com/Templarian/MaterialDesign",
      "category": "Material",
      "commercial_use_allowed": true,
      "grid_size": 24,
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "last_updated": "2025-01-20",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "license_url": "https://github.com/Templarian/MaterialDesign/blob/master/LICENSE",
      "multicolor": false,
      "page_url": "https://icon-sets.iconify.design/mdi/",
      "retired": false,
      "sample_icons": [
        "mdi:account-check",
        "mdi:bell-alert-outline",
        "mdi:calendar-edit"
      ],
      "sample_image_urls": [
        "https://api.iconify.design/mdi/account-check.svg",
        "https://api.iconify.design/mdi/bell-alert-outline.svg",
        "https://api.iconify.design/mdi/calendar-edit.svg"
      ],
      "tags": [
        "Precise Shapes",
        "Has Padding"
      ],
      "total_icons": 7447,
      "version": null
    }
  ],
  "total_icons": 7447
}

List icons in a set

List the icons of one icon set, or of one of its categories such as Arrows or Weather, with preview links, the set's categories and its licence.

Inputs

Icon seticon_settextRequired
The set to list.
Categorycategorytext
Only icons in this category. Leave empty for every icon.
Name containsname_containstext
Only icons whose name contains this, such as arrow.
Number of iconslimitnumber
At most this many icons, up to 1000. 100 by default.From 1 to 1000. Default: 100.

Outputs

attributiontext
author_nametext
author_urltext
categorieslist
categorytext
commercial_use_allowedtrue/false
countnumber
icon_idslist
icon_nameslist
icon_settext
icon_set_nametext
iconslist
last_updatedtext
license_spdxtext
license_titletext
license_urltext
matching_countnumber
more_availabletrue/false
multicolortrue/false
page_urltext
total_iconsnumber
Example output
{
  "attribution": "Material Design Icons by Pictogrammers, licensed under Apache 2.0 (https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).",
  "author_name": "Pictogrammers",
  "author_url": "https://github.com/Templarian/MaterialDesign",
  "categories": [
    {
      "icon_count": 263,
      "name": "Arrow"
    },
    {
      "icon_count": 119,
      "name": "Weather"
    }
  ],
  "category": "Weather",
  "commercial_use_allowed": true,
  "count": 3,
  "icon_ids": [
    "mdi:weather-cloudy",
    "mdi:weather-sunny",
    "mdi:weather-rainy"
  ],
  "icon_names": [
    "weather-cloudy",
    "weather-sunny",
    "weather-rainy"
  ],
  "icon_set": "mdi",
  "icon_set_name": "Material Design Icons",
  "icons": [
    {
      "category": "Weather",
      "commercial_use_allowed": true,
      "icon_id": "mdi:weather-cloudy",
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "image_url": "https://api.iconify.design/mdi/weather-cloudy.svg",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "name": "weather-cloudy",
      "page_url": "https://icon-sets.iconify.design/mdi/weather-cloudy/"
    },
    {
      "category": "Weather",
      "commercial_use_allowed": true,
      "icon_id": "mdi:weather-sunny",
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "image_url": "https://api.iconify.design/mdi/weather-sunny.svg",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "name": "weather-sunny",
      "page_url": "https://icon-sets.iconify.design/mdi/weather-sunny/"
    },
    {
      "category": "Weather",
      "commercial_use_allowed": true,
      "icon_id": "mdi:weather-rainy",
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "image_url": "https://api.iconify.design/mdi/weather-rainy.svg",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "name": "weather-rainy",
      "page_url": "https://icon-sets.iconify.design/mdi/weather-rainy/"
    }
  ],
  "last_updated": "2025-01-20",
  "license_spdx": "Apache-2.0",
  "license_title": "Apache 2.0",
  "license_url": "https://github.com/Templarian/MaterialDesign/blob/master/LICENSE",
  "matching_count": 119,
  "more_available": true,
  "multicolor": false,
  "page_url": "https://icon-sets.iconify.design/mdi/",
  "total_icons": 7447
}

Search icons

Find icons by what they show, across more than 200 open-source icon sets or only the ones you pick: each icon's id, a preview link and its set's licence. Use an id with Get icon to get the icon itself.

Inputs

Search forquerytextRequired
A word or two describing the icon, such as home or shopping cart.
Only in these icon setsicon_setslist
Leave empty to search every set.
Kind of icon setcategorytext
Only search sets of one kind, such as Emoji, Logos or UI 24px. Leave empty for every kind.
Number of iconslimitnumber
At most this many icons, 1 to 999. 32 by default.From 1 to 999. Default: 32.

Outputs

categorytext
countnumber
icon_idslist
icon_setslist
iconslist
more_availabletrue/false
querytext
Example output
{
  "category": null,
  "count": 3,
  "icon_ids": [
    "mdi:home",
    "mdi:home-outline",
    "tabler:home"
  ],
  "icon_sets": [
    "mdi",
    "tabler"
  ],
  "icons": [
    {
      "commercial_use_allowed": true,
      "icon_id": "mdi:home",
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "image_url": "https://api.iconify.design/mdi/home.svg",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "name": "home",
      "page_url": "https://icon-sets.iconify.design/mdi/home/"
    },
    {
      "commercial_use_allowed": true,
      "icon_id": "mdi:home-outline",
      "icon_set": "mdi",
      "icon_set_name": "Material Design Icons",
      "image_url": "https://api.iconify.design/mdi/home-outline.svg",
      "license_spdx": "Apache-2.0",
      "license_title": "Apache 2.0",
      "name": "home-outline",
      "page_url": "https://icon-sets.iconify.design/mdi/home-outline/"
    },
    {
      "commercial_use_allowed": true,
      "icon_id": "tabler:home",
      "icon_set": "tabler",
      "icon_set_name": "Tabler Icons",
      "image_url": "https://api.iconify.design/tabler/home.svg",
      "license_spdx": "MIT",
      "license_title": "MIT",
      "name": "home",
      "page_url": "https://icon-sets.iconify.design/tabler/home/"
    }
  ],
  "more_available": false,
  "query": "home"
}

Suggest search words

Find the words icon names actually use, to search icons with the right one: words that start with what you type, or that start or end with it.

Inputs

WordwordtextRequired
One word, or the start of one, such as arr.
Matchmatchtext
Which words to suggest.One of: starts_with (Words that start with it), contains (Words that start or end with it). Default: starts_with.

Outputs

countnumber
existstrue/false
matchtext
suggestionslist
wordtext
Example output
{
  "count": 5,
  "exists": false,
  "match": "starts_with",
  "suggestions": [
    "array",
    "arrow",
    "arrows",
    "arrange",
    "arrival"
  ],
  "word": "arr"
}

On this page