How to update icon set

Owned by Renata Pereira Juraski
Jul 03, 2024
3 min read

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

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

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

  • They should appear as unselected

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

  • Select them and click Generate Font

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

  • Change the Font Name to custom

  • Close this modal and click Download

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

  • 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.