Traveloka Icon Kit: The Single Source of Icons
Icon-ic Collaboration between Design and Engineering
Editor’s Note: one of the most pressing challenges facing design team of a technology company is dealing with duplicate and non-standard collection of icon assets due to the absence of the right process and standard. Ryan Nixon Salim and Albert Darmawan from the Product Infra team were in the same predicament and today, they want to share their approaches and implementation to address those challenges within an established end-to-end workflow that involves both camps of designers and engineers working in unity.
Ryan is a web infra engineer responsible primarily for ensuring the performance and reliability of Traveloka website in addition to maintaining the core web frameworks as well as the web performance culture and improvement together with the web central team. Albert is a software engineer who creates technological building blocks to support product development using React Native and works with the Design System Workgroup to standardize UI libraries and provide various tools for better collaboration between design and engineering.
At the current Traveloka mobile and web applications, we have hundreds of icons spanning across multiple products. As the number of icons gradually increase, we started to notice that there are two main issues related with icons:
- Icon duplication
We noticed a lot of icon duplications in our codebase. We often included the same icon to the codebase multiple times, only with different file names. Load redundant icons mean larger apps size and not effective assets caching for the web. - Non-standardized icons
Previously, we hadn’t incorporated icons into our design system. In other words, we didn’t have any design standard for icons. While the absence of standard gave a lot of freedom to designers, it could cause design inconsistency at the same time. For example, having five variations of chevron icons for the same purpose is not optimal.
As our design system workgroup strives towards standardizing UI components and providing the supporting tooling, we realized that we could apply the same principle to icons. Hence, we decided to establish an end-to-end collaborative workflow from how designers create icons, all the way to the actual code produced by engineers to release applications.
Icon Kit To The Rescue!
The central piece of the workflow is an icon catalog called TVLK Icon Kit that acts as a single source of truth for all icons in the organization, enabling designers and engineers to discover and use icons from that central catalog. To ensure design consistency, we have a strict rule from the beginning: only put standardized icons inside the catalog. Our designers have been working together to standardize icon name, size, fill/outline styles, even the best practice for organizing layers with design tools.
For better collaboration, we also set up a proper contribution workflow. When designers want to put an icon to the icon kit, they can simply submit the icon to be reviewed by the design system workgroup. Similar to “code review” in engineering, the reviewing step is important to ensure all icons follow the established design guideline. After the icon is approved, the design system workgroup uploads it to TVLK Icon Kit.
What makes our icon kit special is its seamless integration between our icon asset and the codebase. If you want to use an icon, simply right click at an icon and choose a variety of export formats. For our web and React Native codebase, you can simply copy the import path to the clipboard and immediately use it in your code!
How We Built Icon Kit
TVLK Icon Kit is a desktop application built using Electron. By using Electron, the application can be installed on various desktop operating systems such as macOS and Linux. Another benefit of using Electron is its access to the local file system, making it easier when setting up the script to trigger a GitHub action.
As you can see in figure 4, the SVG icons are stored in the Firebase database. To show the icons, the application only needs to retrieve them from the database. Members of the design system workgroup can also upload either a new or updated icon to the database right within the application. To ensure synchronization between TVLK Icon Kit and our codebase, we set up a pipeline to publish all available icons to Node Package Manager (npm) packages.
When a member of the design system workgroup clicks the publish button in the application, it automatically triggers GitHub actions on two repositories: icon-kit-web and district-icon. Both repositories contain the script to export the SVG icons and publish them to our private npm registry. The icon-kit-web publishes all of the icons on the SVG and React component, whereas the district-icon only publishes React components in the format of react-native-svg. Using this approach, engineers simply need to update each package to the latest version to receive updates.
Current Product Adoption
The solution is currently well-received inside our organization and has been used by all web and React Native engineers.
Web
For web platforms, web engineers can install an npm package called @traveloka/icon-kit-web. The package consists of all icons in SVG and React Component format. Here’s an example of how to import a search icon:
For the web application, we prefer using raw SVG files for better asset caching by the browser. In some cases, we use the React icon component for animation and theming purposes. Using the SVG file format for those cases makes the browser download the new icon that causes icon flashing.
React Native
Similar to the web platform, React Native engineers can install an npm package called @traveloka/district-icon. The package consists of React Native components, which have some design-related props such as width, height, and fillColor. The import is pretty straightforward:
However, there is one caveat: since Metro bundler doesn’t support tree shaking, we import the icon directly from its path. Using this approach, we can omit all unimported icons during the bundling process.
Native iOS and Android
Unlike web and React Native, there is no specific pipeline for native Android and iOS yet. Having said that, iOS and Android engineers can still reap the benefit from the TVLK Icon Kit as they can manually export each individual icon to VectorDrawable/PDF format. We are currently still working on a solution to integrate TVLK Icon Kit with our iOS and Android codebase.
Bridging Design and Engineering
Our experience while working on Icon Kit gave us the conviction that engineering and design must collaborate together to solve common problems. Because at the end of the day, we believe that engineering and design in the organization have the same purpose: to deliver great products and user experiences for our customers.
Special thanks to Arie Aulia Nugraha, Bakti Aditya, Fatih Kalifa, Junius Ang, Asendia Mayco, Prashant Verma, and Yohannes Wijaya.
