---
title: "Icons"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/5249826918/Icons"
format: markdown
---
While FB Swift can display a large range of icons, they are not configurable the same way.


Here is a list of all icons FB Swift is able to display:

[https://icons.expo.fyi/Index](https://icons.expo.fyi/Index) 

Some setups may not include all icon sets (e.g. `FCard`, `FProperties`). You can use this list to check if the icon you used can be rendered by Swift:

[https://ionicframework.com/docs/v3/ionicons/](https://ionicframework.com/docs/v3/ionicons/)  


Configurability of the icons depends on which component is responsible for rendering it. 


The most common (also current) approach is to supply both the icon name and family to the configuration. But this approach is not followed by every configurable component. Some components do not allow family of icons to be configured.


Here is how you can configure each set of icons:

# FCard

Example config:

```
{
  "android": "md-briefcase",
  "ios": "ios-briefcase",
  "name": "CARD_ICON",
  "type": "ICON"
}
```

Explanation:

- `name` field always must be `CARD_ICON.`
- `type` field can either be `ICON`, or any of the following icon families: `"FontAwesome" | "AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome5" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"`
  - `android` icon names must be prefixed with `md-`
  - `ios` icon names must be prefixed with `ios-`
  - if type is `ICON`,
    - icon is assumed to belong to `Ionicons`family. Any icon name from IonIcons may be used. Check out: [https://icons.expo.fyi/Index](https://icons.expo.fyi/Index)
  - if type is not `ICON`,
    - check out [https://icons.expo.fyi/Index](https://icons.expo.fyi/Index) , and supply `type` with icon family, and name with icon name.

Example:



# FProperties

Mostly the same as `FCard` icon configuration, except:

- Only supported icon family is `IonIcons`( `type` need not to be set ).
- `name` field need not to be set,
- `android` field name is called `iconName`
- `ios` field name is `iosIconName`

Example:

```
{
  ...
  "iconName": "md-megaphone",
  "iosIconName": "ios-megaphone",
  ...
}

```

Example of icons could be:

cog, help-circle-outline, calendar, calendar-clear, cart, checkmark-circle, warning etc  


# Icons specified in `appSettings.rules.items.icons`

Only `FontAwesome` family of icons is supported. The value of the keys must match the name of the icons, case-sensitive. Example:

```
{
  "icons": {
    "Activity": "wrench",
    "Part": "cube",
    "Other Expense": "credit-card",
    "Delete": "trash",
    "Add": "plus",
    "search-plus": "search-plus"
  }
}
```


# Icons specified in `appSettings.rules.timesheets.groupBy.icons`

Only `IonIcons` family of icons is supported. The value of the keys must match the name of the icons, case-sensitive. Example:

```
{
  "icons": {
    "Servicebezoek": "wrench",
    "Reizen": "car",
    "Travel home": "car",
    "Vergadering": "users",
    "Lunch": "hourglass",
    "Service visit": "wrench",
    "Travel": "car",
    "Internal meeting": "users",
    "Concept": "file"
  }
}
```

# Icons specified in `appSettings.rules.status.actions[number].icon`

Icon field must have the following shape:

```
{
  "type": "IonIcons",
  "name": "call"
}
```

- `type` corresponds to icon family name.
  - One of` "FontAwesome" | "AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome5" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"`
- `name` corresponds to the name of the icon.