Custom Icons

Within the app, we use an extended icon set based on Feather Icons. The icon component library we use is react-native-vector-icons.

Due to some custom icons, the packaged feather icons of the library did not suffice. Therefore, we are setting a custom icon font as described here in combination with the tool icomoon.

A rough description on how we achieved this was by following this guide.

How to Browse Available Icons#

Currently, the only way to browse available icons is to visit the website of icomoon and import the ico-moon-config.json.

  1. Go to https://icomoon.io/app.
  2. Click on the button Import Icons.
  3. Select the ico-moon-config.json under /src/shared/components/common/icons/ico-moon-config.json.

How to Update the Icon Font#

  1. Follow the previous steps on how to browse available icons.
  2. Add, edit or remove icons and generate the new icon font.
  3. Put the generated icomoon.ttf into <PROJECT_ROOT>/assets/fonts.
  4. Rename the generated selection.json to ico-moon-config.json and put the file into /src/shared/components/common/icons.
  5. Run yarn icons and rebuild the app. This will do two things:
  • First, it runs yarn icons:link, which will copy the updated icomoon.ttf into the android and ios folders.
  • Second, it runs yarn icons:types, which generates a convenient type definition.
Edit this page