How to update icon set

This document explains how to update the icon set based on Figma Iconography.

Figma Iconography

Here we have the Iconography source of truth, so every update needs to start from there.

Iconography Figma board

• Select the icons you want to add/update

  • Tip: Select only the icons you want to change just to be safe.

New icons

• Go to Export on the right panel, select SVG and click on Export N layers

Exporting icons on Figma

• It should generate a Styleguide.zip file on your machine containing the files

Exported icons on file system

Icomoon

We use Icomoon to generate our .ttf font file.

• Here's a Google Drive folder containing all versions of the icon set

  • Download the most recent one

• On Icomoon, click on Icomoon App and then Import Icons

• Select the .json file you just downloaded

Imported Icon Set

• Drag and drop the icons you want to add/update to Icomoon

• They should appear as unselected

Icon Set with unselect icons

• Remove the Icomoon Free set at "Remove Set" option

• Select them and click Generate Font

Generate Font screen

• Click Configure (gear icon) on the right side of Download

• Change the Font Name to custom

Configure screen

• Close this modal and click Download

• It should have generated a .zip file with the following content

Unzipped custom icon set

• The only files we're going to use are fonts/custom.ttf and selection.json

• Now we need to update the Google Drive folder

• Click on Untitled Project on the header of Icomoon and then Download

• That should download a .json file to be used next time we need to update the icons again

  • If the resulting json is too big, make sure to remove unnecessary icons

• Make sure to rename it following the Mobile Icons vN.json format and upload it to the Google Drive folder

Updating the app

• Move and replace the new selection.json to app/containers/CustomIcon/selection.json

• Move and replace the new custom.ttf to android/app/src/main/assets/fonts/custom.ttf and to ios/custom.ttf

  • Tip: Don't use Xcode to replace files, because otherwise, you're going to change the links inside the project. Doing it from VSCode, for example, does the job without touching ios/RocketChatRN.xcodeproj/project.pbxproj

• Go to your terminal and run from the root folder of your project yarn build-icon-set to update the mapped icons for Typescript

• Now build the app again and try the new icons