Iconify icon sets in JSON format

Last update: Jun 21, 2022

Iconify icon sets in JSON format

This is collection of SVG icons created by various authors, released under various free licenses. Some collections require attribution when used for commercial purposes. See collections.md for list of collections and their licenses.

All icons have been normalized:

  • Cleaned up, removing anything that is not needed to show icon.
  • Colors for monotone icons have been replaced with currentColor, making it easy to change icon color by changing text color.
  • Icon content has been optimised to reduce its size.

Repository is updated 3 times a week by fully automated script, so it always contains latest icons from various sources.

Format and usage

Icon sets are stored in IconifyJSON format. TypeScript definition is available in @iconify/types package. Documentation is available on Iconify Documentation website.

To work with icon sets, use Iconify Utils. Utils package works in any JavaScript environment: Node.js, Deno, browsers, isolated JavaScript environments. For PHP applications use Iconify JSON Tools.

To create icon sets, use Iconify Tools. Tools package works in Node.js, it can import icons from various sources, do cleanup, optimisation, export it in IconifyJSON format and generate NPM packages.

How to get this repository

Instructions below are for Node.js and PHP projects.

Node.js

Run this command to add icons to your project:

npm install --save @iconify/json

Icons will be available in node_modules/@iconify/json

To resolve filename for any json file, use this if you are using CommonJS syntax:

import { locate } from '@iconify/json';

// returns location of mdi-light.json
const mdiLightFilename = locate('mdi-light');

PHP

Install and initialize Composer project. See documentation at https://getcomposer.org

Then open composer.json and add following code:

=5.6", "iconify/json": "*" }">
"require": {
    "php": ">=5.6",
    "iconify/json": "*"
}

then run:

composer install

Icons will be available in vendor/iconify/json/

If you don't use Composer, clone GitHub repository and add necessary autoload code.

To resolve filename for any json file, use this:

// Returns location of mdi-light.json
$mdiLightLocation = \Iconify\IconsJSON\Finder::locate('mdi-light');

Data format

Icons used by Iconify are in directory json, in Iconify JSON format.

Why JSON instead of SVG? There are several reasons for that:

  • Easy to store images in bulk.
  • Contains only content of icon without SVG element, making it easy to manipulate content without doing complex parsing. It also makes it easier to create components, such as React icon component, allowing to use framework native SVG element.
  • Data can contain additional content: aliases for icons, icon set information, categories/tags/themes.

Why not XML?

  • JSON is much easier to parse without additional tools. All languages support it.

Format of json file is very simple:

", "width": 24, "height": 24 } }, "aliases": { "icon-alias": { "parent": "icon-name" } } }">
{
  "prefix": "mdi-light",
  "icons": {
    "icon-name": {
      "body": "",
      "width": 24,
      "height": 24
    }
  },
  "aliases": {
    "icon-alias": {
      "parent": "icon-name"
    }
  }
}

"icons" object contains list of all icons.

Each icon has following properties:

  • body: icon body.
  • left, top: left and top coordinates of viewBox, default is 0.
  • width, height: dimensions of viewBox, default is 16.
  • rotate: rotation. Default = 0. Values: 0 = 0deg, 1 = 90deg, 2 = 180deg, 3 = 270deg.
  • hFlip: horizontal flip. Boolean value, default = false.
  • vFlip: vertical flip. Boolean value, default = false.
  • hidden: if set to true, icon is hidden. That means icon was removed from collection for some reason, but it is kept in JSON file to prevent applications that rely on old icon from breaking.

Optional "aliases" object contains list of aliases for icons. Format is similar to "icons" object, but without "body" property and with additional property "parent" that points to parent icon. Transformation properties (rotate, hFlip, vFlip) are merged with parent icon's properties. Any other properties overwrite properties of parent icon.

When multiple icons have the same value, it is moved to root object to reduce duplication:

" }, "icon2": { "body": "" }, "icon-20": { "body": "", "width": 20, "height": 20 } }, "width": 24, "height": 24 }">
{
  "prefix": "mdi-light",
  "icons": {
    "icon1": {
      "body": ""
    },
    "icon2": {
      "body": ""
    },
    "icon-20": {
      "body": "",
      "width": 20,
      "height": 20
    }
  },
  "width": 24,
  "height": 24
}

In example above, "icon1" and "icon2" are 24x24, "icon-20" is 20x20.

For more information see developer documentation on https://docs.iconify.design/types/iconify-json.html

Extracting individual SVG icons

For PHP use Iconify JSON Tools.

For JavaScript use Iconify Utils, though Iconify JSON Tools are also available (but deprecated).

Example using Iconify Utils (TypeScript):

${renderData.body}`; exportedSVG[iconName] = svg; }); // Output directory const outputDir = 'mdi-export'; try { await fs.mkdir(outputDir, { recursive: true, }); } catch (err) { // } // Save all files const filenames = Object.keys(exportedSVG); for (let i = 0; i < filenames.length; i++) { const filename = filenames[i]; const svg = exportedSVG[filename]; await fs.writeFile(outputDir + '/' + filename + '.svg', svg, 'utf8'); } })();">
import { promises as fs } from 'fs';

// Function to locate JSON file
import { locate } from '@iconify/json';

// Various functions from Iconify Utils
import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { defaults } from '@iconify/utils/lib/customisations';

(async () => {
  // Locate icons
  const filename = locate('mdi');

  // Load icon set
  const icons = JSON.parse(await fs.readFile(filename, 'utf8'));

  // Parse all icons
  const exportedSVG: Record<string, string> = Object.create(null);
  parseIconSet(icons, (iconName, iconData) => {
    if (!iconData) {
      // Invalid icon
      console.error(`Error parsing icon ${iconName}`);
      return;
    }

    // Render icon
    const renderData = iconToSVG(iconData, {
      ...defaults,
      height: 'auto',
    });

    // Generate attributes for SVG element
    const svgAttributes: Record<string, string> = {
      'xmlns': 'http://www.w3.org/2000/svg',
      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
      ...renderData.attributes,
    };
    const svgAttributesStr = Object.keys(svgAttributes)
      .map(
        (attr) =>
          // No need to check attributes for special characters, such as quotes,
          // they cannot contain anything that needs escaping.
          `${attr}="${svgAttributes[attr as keyof typeof svgAttributes]}"`
      )
      .join(' ');

    // Generate SVG
    const svg = `${svgAttributesStr}>${renderData.body}`;
    exportedSVG[iconName] = svg;
  });

  // Output directory
  const outputDir = 'mdi-export';
  try {
    await fs.mkdir(outputDir, {
      recursive: true,
    });
  } catch (err) {
    //
  }

  // Save all files
  const filenames = Object.keys(exportedSVG);
  for (let i = 0; i < filenames.length; i++) {
    const filename = filenames[i];
    const svg = exportedSVG[filename];
    await fs.writeFile(outputDir + '/' + filename + '.svg', svg, 'utf8');
  }
})();

Example using Iconify JSON Tools:

const fs = require('fs');
const { SVG, Collection } = require('@iconify/json-tools');

const outputDir = 'mdi-export';
try {
  fs.mkdirSync(outputDir, {
    recursive: true,
  });
} catch (err) {
  //
}

const collection = new Collection();
collection.loadIconifyCollection('mdi');
collection.listIcons(true).forEach((icon) => {
  let svg = new SVG(collection.getIconData(icon));
  fs.writeFileSync(
    outputDir + '/' + icon + '.svg',
    svg.getSVG({
      height: 'auto',
    })
  );
});
use \Iconify\JSONTools\Collection;
use \Iconify\JSONTools\SVG;

$outputDir = 'mdi-export';
@mkdir($outputDir, 0777, true);

$collection = new Collection();
$collection->loadIconifyCollection('mdi');
foreach ($collection->listIcons(true) as $icon) {
    $svg = new SVG($collection->getIconData($icon));
    file_put_contents($outputDir . '/' . $icon . '.svg', $svg->getSVG([
        'height'    => 'auto'
    ]));
}

License

This is collection of works by various authors, not original collection.

See collections.md for list of collections and their licenses.

GitHub

https://github.com/iconify/icon-sets
Comments
  • 1. Publish sub packages

    Hey again, I been using this package for a while and it's truly amazing!!

    I made vite-plugin-icons to bundle icons on-demand and it's by far my best icons solution.

    However the current concern is that when using it, you will need to install the entire @iconify/json (~120MB) to use only a few of them. If would be great if we could publish each collections as standalone packages, for example: @iconify/json-carbon, so the build tool could search for it on-demand.

    If you like this idea, I am happy to send a PR :)

    Reviewed by antfu at 2021-08-24 07:31
  • 2. feat: add ts and esm support with tsup

    This PR adds Typescript and ESM Support: finder.ts will be compiled to finder.mjs and finder.js with typescript declarations.

    It is the first approach, it will need some review and update the docs (readme.md).

    You will need rimraf as global dependency (I'm not sure, I have so much node versions and so much package managers I'm lost, sorry): I've included the yarn.lock file.

    Reviewed by userquin at 2021-09-12 02:53
  • 3. Remove non-free Icons8 icons

    The icons from Icons8 are mostly published under a non-free license (the "Good Boy License"). This license is meant to be funny, but makes it impossible to use the icons without legal issues in practice.

    In general, it would be a good idea to only include icon sets licensed under an OSI-, FSF- or DFSG-approved license.

    Reviewed by Natureshadow at 2021-02-16 22:11
  • 4. New Icon Sets

    Hello,

    Is there any way i can contribute to add to the collection? Or I should just suggest the icon with the repository and the details and you will get it added eventually as per your availability?

    Some icon sets: https://github.com/Make-Lemonade/iconicicons https://github.com/nagoshiashumari/rpg-awesome-raw

    Reviewed by swapnilsarwe at 2021-06-24 10:27
  • 5. Mono Icons twice

    Why are Mono Icons available under two different names? mi.json as well as mono-icons.json point to the exact same repository with the only difference being the vendor company (which still is the same) as well as the preview icons.

    Reviewed by bennetfabian at 2021-11-17 15:44
  • 6. Update Google MDI icons

    recently Google MDI released version 2.0 of there icons which now includes 5 themes of all their icons

    baseline, outline, round, sharp, twotown

    so

    baseline-assessment outline-assessment round-assessment twotone-assessment sharp-assessment

    they have not updated their github repo yet https://github.com/google/material-design-icons/issues/811 so the manual download is the only option at the moment https://material.io/tools/icons/?search=ass&icon=assignment&style=outline

    Reviewed by hanakin at 2019-03-17 13:47
  • 7. Would be great if we could add Flagpack, by @Yummygum.

    Flagpack Cover Image

    As the title implies, this would make a super diverse and helpful flag collection available for the greater public. This can be especially useful when using unplugin-icons, so they're available in all bundlers and environments.

    https://github.com/Yummygum/flagpack-core

    Reviewed by didier at 2022-02-08 11:59
  • 8. Request to add Heroicons and Zondicons

    (Not sure if this is the right place to ask but I saw some requests here in closed issues so I'm posting here.)

    I'd like to have these two icon sets:

    1. https://github.com/refactoringui/heroicons (MIT)
    2. https://github.com/dukestreetstudio/zondicons (https://www.zondicons.com/; MIT)

    I'd write the crawler but I can't find the scripts you wrote to crawl all other icon sets. Are they in some other repo?

    Reviewed by utkarshkukreti at 2020-05-02 13:13
  • 9. Add Devicons set

    Hopefully this one is better than my flub in #38.

    https://github.com/vorillaz/devicons https://icalvin102.github.io/svelte-nerdfonts/

    Contains icons for developers. Part of what gets sucked in to Nerd Fonts.

    Reviewed by vhscom at 2022-04-21 14:41
  • 10. Add Nimbus Icons

    Recently stumbled across Nimbus Icons while browsing Figma Community.

    Even though their GitHub repo doesn't have that much stars I think their icon pack looks nice and should be considered adding to Iconify's ever-growing icon pack collection.

    Reviewed by bennetfabian at 2022-02-17 17:41
  • 11. Add Charm Icons

    Hi,

    I've only recently discovered Iconify but I'm a fan!

    I wonder (without bigging myself up too much) if my icon set Charm could be added.

    It is open source and licensed under MIT.

    Thanks!

    Reviewed by jaynewey at 2022-01-15 11:18
Related tags
A simple validator package to check if the given zipcode has a valid Dutch zipcode format
A simple validator package to check if the given zipcode has a valid Dutch zipcode format

Laravel Dutch Zipcode Validator A simple validator package to check if the given zipcode has a valid Dutch zipcode format Table of Contents Installati

May 30, 2022
Laravel package to convert English numbers to Bangla number or Bangla text, Bangla month name and Bangla Money Format

Number to Bangla Number, Word or Month Name in Laravel | Get Wordpress Plugin Laravel package to convert English numbers to Bangla number or Bangla te

Jun 1, 2022
Make Laravel Pivot Tables using the new Laravel 9 closure migration format

This will allow you to create pivot table migration files using the new Laravel 9 closure migration format by simply passing two models.

Mar 30, 2022
Get estimated read time of an article. Similar to medium.com's "x min read". Multilingual including right-to-left written languages. Supports JSON, Array and String output.

Read Time Calculates the read time of an article. Output string e.g: x min read or 5 minutes read. Features Multilingual translations support. Static

Sep 7, 2021
Lightweight JSON:API resource for Laravel

JSON:API Resource for Laravel A lightweight Laravel implementation of JSON:API. This is a WIP project currently being built out via livestream on my Y

Jun 24, 2022
JSON-RPC 2.0 API server for @Laravel framework
JSON-RPC 2.0 API server for @Laravel framework

Sajya is an open-source project aiming to implement the JSON-RPC 2.0 server specification for the Laravel quickly.

Jun 9, 2022
Builds nice, normalized and easy to consume REST JSON responses for Laravel powered APIs.

REST API Response Builder for Laravel Master branch: Development branch: Table of contents Introduction Why should I use it? Usage examples Features E

Jun 17, 2022
PHP Simple Response, XML, JSON,... auto response with accept in request's header

simple-response Simple package to handle response properly in your API. This package does not include any dependency. Install Via Composer $ composer

Dec 8, 2021
🔐 JSON Web Token Authentication for Laravel & Lumen
🔐 JSON Web Token Authentication for Laravel & Lumen

Documentation Documentation for 1.* here For version 0.5.* See the WIKI for documentation. Supported by Auth0 If you want to easily add secure authent

Jun 26, 2022
Tool to convert from composer.yml to composer.json.

composer-yaml This project allows you to convert a composer.yml file into composer.json format. It will use those exact filenames of your current work

Nov 19, 2021
The list of all Algerian provinces and cities according to the official division in different formats: csv, xlsx, php, json, etc.

algeria-cities This repository contains the list of all the administrative provinces and cities in Algeria. The data is up-to-date according to the of

Jun 25, 2022
⚙️Simple key/value typed settings for your Laravel app with synchronized json export

Simple key/value typed settings for your Laravel app Create, store and use key/value settings, typed from numbers over dates to array, cached for quic

Jun 21, 2022
JSON:API for Laravel applications

JSON:API for Web Artisans Implement feature-rich JSON:API compliant APIs in your Laravel applications. Build your next standards-compliant API today.

Jun 30, 2022
Generate Data Transfer Objects directly from JSON objects
Generate Data Transfer Objects directly from JSON objects

Json 2 DTO Spatie's Data Transfer Object library is awesome, but typing out DTOs can quickly become a chore. Inspired by Json2Typescript style tools,

Jun 20, 2022
Source code behind the Laracasts Larabit: Using MySQL JSON Columns with Laravel

Using MySQL JSON Columns with Laravel This is the source code behind the Laracasts Larabit: Using MySQL JSON Columns with Laravel, and features all of

Dec 24, 2021
Store your Laravel application settings in an on-disk JSON file

Store your Laravel application settings in an on-disk JSON file. This package provides a simple SettingsRepository class that can be used to store you

May 23, 2022
Icônes Form Widget for October and winter CMS. One library, over 100,000 vector icons, and 108+ icon sets powered by Iconify
Icônes Form Widget for October and winter CMS. One library, over 100,000 vector icons, and 108+ icon sets powered by Iconify

Icônes Form Widget ?? ?? ?? Access thousands of SVG icons as a backend form widget. One library, over 100,000 vector icons, Modern replacement for ico

Jun 27, 2022
YCOM Impersonate. Login as selected YCOM user 🧙‍♂️in frontend.

YCOM Impersonate Login as selected YCOM user in frontend. Features: Backend users with admin rights or YCOM[] rights, can be automatically logged in v

Jan 19, 2022
JSONFinder - a library that can find json values in a mixed text or html documents, can filter and search the json tree, and converts php objects to json without 'ext-json' extension.

JSONFinder - a library that can find json values in a mixed text or html documents, can filter and search the json tree, and converts php objects to json without 'ext-json' extension.

Apr 15, 2022
Font Awesome 5/6 (pro/subset) Icon Picker
Font Awesome 5/6 (pro/subset) Icon Picker

Font Awesome Icon Picker Icon-Picker für Font Awesome ab Version 5. Der Iconpicker wird an Text-Eingabefelder angebunden. Beim Klick öffnet sich ein P

Jan 28, 2022