Iconify icon sets in JSON format

Iconify

Last update: Dec 29, 2022

Related tags

Laravel icon-sets

Overview

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.

Comments

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 :)

opened by antfu 53
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.

opened by userquin 13
HeroIcons update issue

HeroIcons recently released v2.0.0 of their icon package.

Unfortunately, this update was major (changed the stroke width, the style of the icons, introduced a newer size, etc). In v1.0, the icon identifiers were prefixed as heroicons-outline:icon & heroicons-solid:icon... The prior remains untouched and still shows the v1.0 icons (for now, but looks like you removed heroicons-outline https://github.com/iconify/icon-sets/commit/d5ebd94075f1fd65fdd6fadd358604d688ffa8bb, does this mean these icons will disappear??)

The latter was updated overnight to 2.0 and the change has surely by now propagated to hundreds of sites without warning.

Surely there has to be an upgrade path or something, not just removing and replacing entire icon sets?

opened by chasegiunta 9
Add Fluent UI MDL2 icons from @fluentui/react-icons-mdl2

The icons are currently defined directly in the JSX of the components (example component), locking them into use with React (I have opened an issue with them about this). However, as they are licensed under MIT and similarily formatted it should prove trivial to extract the actual SVG files (simply running a search using <svg(.|\n)*<\/svg> in VSCode on the relevant directory yields the necessary results for me).

If you wish I could perhaps provide a pull request for this.

opened by gburning 8
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.

opened by Natureshadow 7
[Feature request] Add filter: stroke || fill
Some icon sets are designed using strokes, some are designed using fills. This is a huge difference for designers. These icons behave differently on scaling: stroke icons keep constant stroke width, or it can be easily changed. Fill icons keep the proportions on scaling. Sometimes you need one feature, sometimes another.

Examples:

Stroke icon sets: Lucide

Fill icon sets: Material Design everything

It seems to be easily achieved via SVG code parsing:

Stroke icons have something like fill="none" stroke="currentColor" stroke-width="2" (stroke width can be any number)

Fill icons have fill="currentColor"

Thank you in advance! You make an awesome job, if you need any help with this ↑ — please let me know.
opened by okyr-ux 6
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

opened by swapnilsarwe 6

Dashboard Icons

There's a set of icons very useful in the world of Dashboards, such as Homarr.

The SVG icons in that repo would be great to have access to, but the licensing may be an issue, this is what it says in the LICENSE file:

(Almost) All product names, trademarks and registered trademarks in the images in this repository, are property of their respective owners. All images in this repository are used by the users of the Dashboard Icons project for identification purposes only.

The use of these names, trademarks and brands appearing in these image files, do not imply endorsement.

What do you think, would this be a suitable set to add?

opened by markus-li 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.

opened by bennetfabian 5
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

opened by hanakin 5
Split up Pepicons sets

Hey, I'm the author of Pepicons: https://github.com/iconify/icon-sets/blob/master/json/pepicons.json

Is there anyway I can provide you with my icon set but split up into 2 separate sets: Pepicons Print and Pepicons Pop.

As you can see on the website: https://pepicons.com

they're very different and are not meant to be mixed.

Any guidance is much appreciated!

opened by mesqueeb 4
Missing some OpenSource IconSets
Hi, everyone

I've found these iconsets are opensource and not included in Iconify:

Circum - MPL 2.0

DevIcons - MIT

GovIcons - SIL Open Font License (OFL)

Linearicons - CC BY-SA 4.0

OpenWeb Icons - SIL Open Font License (OFL) - I think...

Themify Icons - SIL Open Font License (OFL) - (I find the license inside readme.txt on downloaded themify-icons.font.zip)

If they could be included, I will try to make some PR's to include each one (if easy)
opened by iuridiniz 17
Vector Logo Zone

Would the below be a good fit to include in Iconify?

To me it seems like a clean collection of icons/logos, but I might be wrong.

https://github.com/VectorLogoZone/vectorlogozone/tree/main/www/logos

opened by markus-li 7
Provide meta data in icon JSON files

Hey, first of all thank you for your great work.

I'm wondering if it's possible to include meta data like "search terms" in the json files for each icon if the library provides it?

opened by CreativeDive 4

Owner

Iconify

Modern unified SVG framework. One syntax for many icon sets: FontAwesome, Material Design Icons, Dashicons and many others. Over 100,000 icons, very easy to use

GitHub http://icon-sets.iconify.design/

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

0 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

50 Dec 26, 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.

16 Aug 23, 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

8 Dec 9, 2022

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

241 Jan 5, 2023

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.

179 Dec 29, 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

614 Dec 26, 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

3 Dec 8, 2021

🔐 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

10.7k Jan 3, 2023

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

56 Sep 28, 2022

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

393 Jan 2, 2023

Iconify icon sets in JSON format

Related tags

Overview

Iconify icon sets in JSON format

Format and usage

How to get this repository

Node.js

PHP

Data format

Extracting individual SVG icons

License

Comments

Owner

Iconify

A simple validator package to check if the given zipcode has a valid Dutch zipcode format

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

Make Laravel Pivot Tables using the new Laravel 9 closure migration format

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.

Lightweight JSON:API resource for Laravel

JSON-RPC 2.0 API server for @Laravel framework

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

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

🔐 JSON Web Token Authentication for Laravel & Lumen

Tool to convert from composer.yml to composer.json.

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

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

JSON:API for Laravel applications

Generate Data Transfer Objects directly from JSON objects

Source code behind the Laracasts Larabit: Using MySQL JSON Columns with Laravel

Store your Laravel application settings in an on-disk JSON file

The fastest way to make a powerful JSON:API compatible Rest API with Laravel.

Renders consistent HTTP JSON responses for API-based projects

A demo of how to use filament/forms to build a user-facing Form Builder which stores fields in JSON.