Skip to content


This function is part of IconSet class in Iconify Tools.

Function setVariation() adds new icon variation to icon set or overwrites existing item.


Icon variation is an item that is based on different icon, but has at least one transformation applied to it.

For example, "arrow-left" can be a variation of "arrow-right" with hFlip enabled.

Variations make it easier to maintain icons that are based on other icons and reduce content duplication.


Function has the following parameters:

  • name, string. Icon name.
  • parent, string. Parent item name.
  • props, CommonIconProps. Icon transformations.

Function returns a simple true on success, false on failure.


tsimport { blankIconSet } from '@iconify/tools';

// Create icon set, add few icons
const iconSet = blankIconSet('test-prefix');
iconSet.setIcon('add', {
   body: '<path d="M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z" fill="currentColor"/>',
   width: 32,
   height: 32,

iconSet.setIcon('caret-down', {
   body: '<path d="M24 12l-8 10l-8-10z" fill="currentColor"/>',
   width: 32,
   height: 32,
iconSet.setVariation('caret-up', 'caret-down', {
   vFlip: true,

iconSet.setAlias('plus', 'add');

// Export icon set
const data = iconSet.export();
console.log(JSON.stringify(data, null, '\t'));
   "prefix": "test-prefix",
   "icons": {
       "add": {
           "body": "<path d=\"M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z\" fill=\"currentColor\"/>"
       "caret-down": {
           "body": "<path d=\"M24 12l-8 10l-8-10z\" fill=\"currentColor\"/>"
   "aliases": {
       "caret-up": {
           "parent": "caret-down",
           "vFlip": true
       "plus": {
           "parent": "add"
   "width": 32,
   "height": 32

Released under the Apache 2.0 License.