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
| Action | What it does |
|---|---|
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
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
- Icons
iconslistRequired - 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 set
icon_settext - The set for icons given by name only, such as home.Default:
mdi. - Colour
colortext - 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
classeslistcolortextcountnumbercsstexthtmltextnot_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 set
icon_settext - The set the icon is from. Not needed when the icon is given as a full id such as mdi:home.Default:
mdi. - Icon
icontextRequired - 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. - Colour
colortext - 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. - Rotation
rotatetext - Turn the icon.One of:
0(No rotation),90(90° clockwise),180(180°),270(270° clockwise (90° anticlockwise)). Default:0. - Flip
fliptext - 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 it
keep_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 file
save_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
attributiontextauthor_nametextauthor_urltextcolortextcommercial_use_allowedtrue/falsecontent_typetextdata_urltextdocument_reftextdocumentslistfile_size_bytesnumberfile_urltextfliptextheightnumbericon_idtexticon_settexticon_set_nametextimage_tagtextimage_urltextlicense_spdxtextlicense_titletextlicense_urltextmulticolortrue/falsenametextpage_urltextrotatenumbersaved_as_filetrue/falsesvgtextwidthnumber
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&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 set
categorytext - Only sets of one kind, such as Emoji or Logos.
- Name contains
name_containstext - Only sets whose name contains this, such as awesome.
- Only sets free for commercial use
commercial_use_onlytrue/false - Leave out sets whose licence forbids commercial use.Default:
false. - Include retired sets
include_retiredtrue/false - Also list sets that are no longer maintained or were replaced by a newer version.Default:
false.
Outputs
countnumbericon_set_idslisticon_setslisttotal_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 set
icon_settextRequired - The set to list.
- Category
categorytext - Only icons in this category. Leave empty for every icon.
- Name contains
name_containstext - Only icons whose name contains this, such as arrow.
- Number of icons
limitnumber - At most this many icons, up to 1000. 100 by default.From 1 to 1000. Default:
100.
Outputs
attributiontextauthor_nametextauthor_urltextcategorieslistcategorytextcommercial_use_allowedtrue/falsecountnumbericon_idslisticon_nameslisticon_settexticon_set_nametexticonslistlast_updatedtextlicense_spdxtextlicense_titletextlicense_urltextmatching_countnumbermore_availabletrue/falsemulticolortrue/falsepage_urltexttotal_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 for
querytextRequired - A word or two describing the icon, such as home or shopping cart.
- Only in these icon sets
icon_setslist - Leave empty to search every set.
- Kind of icon set
categorytext - Only search sets of one kind, such as Emoji, Logos or UI 24px. Leave empty for every kind.
- Number of icons
limitnumber - At most this many icons, 1 to 999. 32 by default.From 1 to 999. Default:
32.
Outputs
categorytextcountnumbericon_idslisticon_setslisticonslistmore_availabletrue/falsequerytext
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
- Word
wordtextRequired - One word, or the start of one, such as arr.
- Match
matchtext - 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
countnumberexiststrue/falsematchtextsuggestionslistwordtext
Example output
{
"count": 5,
"exists": false,
"match": "starts_with",
"suggestions": [
"array",
"arrow",
"arrows",
"arrange",
"arrival"
],
"word": "arr"
}