# Iconify

> 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.

App · 6 actions. Web page: https://docs.lodol.com/docs/integrations/iconify

## Actions

### 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 (`icons`, list, required): 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_set`, text): The set for icons given by name only, such as home. Default: `mdi`.
- Colour (`color`, text): 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**

- `classes` (list)
- `color` (text)
- `count` (number)
- `css` (text)
- `html` (text)
- `not_found` (list)

**Example output**

```json
{
  "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_set`, text): The set the icon is from. Not needed when the icon is given as a full id such as mdi:home. Default: `mdi`.
- Icon (`icon`, text, required): 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) (`size`, number): The icon's height in pixels; its width follows its shape. 24 by default. From 1 to 4096. Default: `24`.
- Colour (`color`, text): 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 (`rotate`, text): Turn the icon. One of: `0` (No rotation), `90` (90° clockwise), `180` (180°), `270` (270° clockwise (90° anticlockwise)). Default: `0`.
- Flip (`flip`, text): 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_canvas`, true/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_file`, true/false): Turn on when a later step needs the file itself, to attach to an email or upload to storage. Default: `false`.

**Outputs**

- `attribution` (text)
- `author_name` (text)
- `author_url` (text)
- `color` (text)
- `commercial_use_allowed` (true/false)
- `content_type` (text)
- `data_url` (text)
- `document_ref` (text)
- `documents` (list)
- `file_size_bytes` (number)
- `file_url` (text)
- `flip` (text)
- `height` (number)
- `icon_id` (text)
- `icon_set` (text)
- `icon_set_name` (text)
- `image_tag` (text)
- `image_url` (text)
- `license_spdx` (text)
- `license_title` (text)
- `license_url` (text)
- `multicolor` (true/false)
- `name` (text)
- `page_url` (text)
- `rotate` (number)
- `saved_as_file` (true/false)
- `svg` (text)
- `width` (number)

**Example output**

```json
{
  "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 set (`category`, text): Only sets of one kind, such as Emoji or Logos.
- Name contains (`name_contains`, text): Only sets whose name contains this, such as awesome.
- Only sets free for commercial use (`commercial_use_only`, true/false): Leave out sets whose licence forbids commercial use. Default: `false`.
- Include retired sets (`include_retired`, true/false): Also list sets that are no longer maintained or were replaced by a newer version. Default: `false`.

**Outputs**

- `count` (number)
- `icon_set_ids` (list)
- `icon_sets` (list)
- `total_icons` (number)

**Example output**

```json
{
  "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_set`, text, required): The set to list.
- Category (`category`, text): Only icons in this category. Leave empty for every icon.
- Name contains (`name_contains`, text): Only icons whose name contains this, such as arrow.
- Number of icons (`limit`, number): At most this many icons, up to 1000. 100 by default. From 1 to 1000. Default: `100`.

**Outputs**

- `attribution` (text)
- `author_name` (text)
- `author_url` (text)
- `categories` (list)
- `category` (text)
- `commercial_use_allowed` (true/false)
- `count` (number)
- `icon_ids` (list)
- `icon_names` (list)
- `icon_set` (text)
- `icon_set_name` (text)
- `icons` (list)
- `last_updated` (text)
- `license_spdx` (text)
- `license_title` (text)
- `license_url` (text)
- `matching_count` (number)
- `more_available` (true/false)
- `multicolor` (true/false)
- `page_url` (text)
- `total_icons` (number)

**Example output**

```json
{
  "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 (`query`, text, required): A word or two describing the icon, such as home or shopping cart.
- Only in these icon sets (`icon_sets`, list): Leave empty to search every set.
- Kind of icon set (`category`, text): Only search sets of one kind, such as Emoji, Logos or UI 24px. Leave empty for every kind.
- Number of icons (`limit`, number): At most this many icons, 1 to 999. 32 by default. From 1 to 999. Default: `32`.

**Outputs**

- `category` (text)
- `count` (number)
- `icon_ids` (list)
- `icon_sets` (list)
- `icons` (list)
- `more_available` (true/false)
- `query` (text)

**Example output**

```json
{
  "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 (`word`, text, required): One word, or the start of one, such as arr.
- Match (`match`, text): 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**

- `count` (number)
- `exists` (true/false)
- `match` (text)
- `suggestions` (list)
- `word` (text)

**Example output**

```json
{
  "count": 5,
  "exists": false,
  "match": "starts_with",
  "suggestions": [
    "array",
    "arrow",
    "arrows",
    "arrange",
    "arrival"
  ],
  "word": "arr"
}
```