Icons

You can find all the icons and logos that can be used in DF tables on this page.

You can use all the icons and logos listed below in DF tables. When defining an icon, the keys listed in the lists are used.

Additionally, for more readable configurations, you can use hyphens, underscores, or upper/lower case letters in the icon keys.

The icons listed in the Icons section support custom colors. However, the "color" property cannot be used with Brand logos and Cloud logos.

Examples

Simple icon usage

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": " "
      },
      "label": {
        "type": "icon",
        "options": [
          {
            "icon": "slack"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackAccount"
  ],
  "properties": {
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

Using icons with custom colors

{
  "hidden": false,
  "columnName": "Status",
  "name": "status",
  "calc": "details.status",
  "format": {
    "displayValue": {
      "type": "string",
      "value": "{self}"
    },
    "label": {
      "type": "icon",
      "options": [
        {
          "value": "Passed",
          "color": "green",
          "icon": "circle-check"
        },
        {
          "value": "In Progress",
          "color": "orange",
          "icon": "circle-progress"
        },
        {
          "value": "Failed",
          "color": "red",
          "icon": "circle-times"
        }
      ]
    }
  }
}

{
  "properties": {
    "status": {
      "title": "Status",
      "type": "string",
      "enum": [
        "Passed",
        "In Progress",
        "Failed"
      ]
    }
  }
}

Icons

Examples

Simple icon usage

Icons

Brand Logos

Cloud Logos

Examples

Simple icon usage

Icons

Brand Logos

Cloud Logos