All icons are prepared for platform specific needs
Exposes a tintable SVG that can be loaded directly or used via a CSS custom property
Transforms the icon to a vector drawable asset
Transforms the icon to an Xcode Image Set
- Create the icon and add it to the Figma icon library. Refer to the guidelines for icon preparation.
- Export the icons from Figma
- We currently export the 24x24 icon variants only (optical scaling is yet to be adopted). The process is manual but fast to do.
- First select all of the 24pt variants from the document above. This easiest way to do this is to search for
24
and select all the results except for the placeholder ones. - Copy & paste these (or Option/Alt drag) to a safe working area, leaving the originals alone.
- Using the SVG Export plugin on Figma, apply the
Monochrome
preset to the selected icons. This preset exports usingcurrentColor
so the icon can be tintable. - Download the icons zip file and extract it locally.
- Tidy up the file names: lower case and replace spaces with hyphens
bash/zsh
fish
for file in *; do mv -v -- "$file" "$(echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')"; done
for file in *; mv -v -- "$file" (echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]'); end
- Copy the icons to the
icons/
folder - Run
yarn build
at the root of the project or ask a maintainer to do this for you - Open a pull request against the
develop
branch
- Create an icon request in vector-im/compound
Removing an icon is a breaking change, and should be reflected in the changelog and a major change in package version.
Renaming an icon is functionally the same as deleting an icon and adding another. This should be marked as a breaking change. The changelog should include migration instructions.
Visual changes to icons are considered a backwards compatible change (semver patch).