Search…
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
  • 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
  • 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
Last modified 2mo ago
Export as PDF
Copy link
On this page
Figma Iconography
Icomoon
Updating the app