How to add an icon
Finding an icon#
- Make sure the icon you need doesn’t already live in the Paste repo and that you can’t use one of the existing ones.
- Find a new icon by searching through the Streamline app, then message #help-design-system for the Sketch file.
- Create a branch in Abstract.
- If you’re planning on adding the icon to Paste, first create a Github issue. Explain what you’re using it for, and list other potential use cases outside of your own. Add a link or screenshot of the proposed icon. If the team agrees, create a branch in the "Paste icons" Abstract project.
- If the icon won’t be added to Paste, create a branch in your own Abstract project and skip to Using a Streamline icon.
Setting up an icon in Paste Icons#
Written for Sketch 59.1
- Open "paste icons.sketch".
- Go to the page "Symbols".
- Duplicate the empty template artboards ("16/icon name", "20/icon name", and "24/icon name"). Make sure the artboards are aligned evenly on the canvas with the existing icon artboards.
- Turn the new artboards into symbols.
- In the artboard names, replace "icon name" with the name of your icon.
Using a Streamline icon#
- Copy and paste the Streamline icon onto the 24px artboard.
- Select all the layers and change the border width to 2.
- Select the layer group. Lock the width-height aspect ratio. If the icon appears larger than the bounds of the artboard, shrink the icon down to just fill the artboard. 20–22 px usually works.
- Duplicate the layer group. Rename the original group to "source" and hide it.
- Ungroup the new layer group. You’ll be working with these layers.
Formatting an icon#
- Convert your icons to outlines so that the width of the lines stay consistent.
- Select all the layers and press "OPTION + COMMAND + O", or use Sketch's menu, "Layer > Convert to Outlines".
- Make sure each layer now has a fill and not a stroke.
- Create a union with all the pieces of your icon. This will merge individual pieces together to create one shape. You can find the Union tool in Sketch's toolbar at the top or go to "Layer > Combine > Union".
- Apply the layer style "icon/color-text-icon" from one of the Paste themes to the combined shape. In the layer list, you should only have this shape and the hidden "source" group.
- Rename the combined shape to "[icon name]".
- Make sure the icon is centered on the artboard both vertically and horizontally. If you’re working with an asymmetric shape, you might need to adjust it manually to make sure it’s optically centered. For example, you might need to move a "play" icon a bit right-of-center to account for the low visual weight on its right side.
- Make sure there are no transforms on the shape. If there are, go to "Layer > Combine > Flatten".
- This is what your layer and sidebar should look like:
- If you’re working on a Paste icon, place the "24/[icon name]" symbol on the "20/[icon name]" and "16/[icon name]" artboards. Resize them to 20px × 20px and 16px × 16px respectively. Fix the size of the layer horizontally and vertically.
- Rename the layer to "icon".
Exporting the icon#
- Make sure you have the SVGO compressor Sketch plugin installed.
- Export the 24px icon artboard (not the combined shape) as an SVG. The template artboard is already set up to do this.
- Make sure the SVG code is clean:
- You shouldn’t see
id. If you do, make sure the SVGO compressor plugin is properly installed.
- You shouldn’t see
transform. If you do, flatten your shape.
- You should see
width=”24" height="24". If you don’t, check that the artboard you’re exporting is 24px × 24px and you’re exporting the artboard, not the layer.
- You shouldn’t see
- Commit your changes in Abstract and request a review from the Paste design team.
Adding the icon to the Paste repository#
Once the icon is designed and exported, we need to get it in the hands of our developers.
There are two ways for icons to be added into the
@twilio-paste/icons code package:
- You can file an issue on Github providing all the information you have about the icon. Ideally, this issue would attach the SVG icon generated in the above steps. This method is hands-off, but comes at the cost of needing to wait between 2 to 6 weeks for us to plan and execute on the work.
- Alternatively, you can open a Pull Request (PR) on our repository with the required changes. This self-service approach would greatly speed up the process of getting your icon into the Paste package because it bypasses our team's sprint practices.
- Fork the Paste repository because PRs can only be open against forks and not branches for security reasons.
- Clone your newly forked Paste repository:
git clone <url>
- Navigate inside the newly cloned repository with
- For each new icon you would like to create, add an
svgicon file into the
- From the root Paste folder, run the following command in your terminal:
yarn workspace @twilio-paste/icons convert-new
- Verify your new icons were added correctly by checking the
packages/twilio-icons/srcfolder to see the newly created source files.
- At this point, run the following command to update our documentation with the new icons:
yarn workspace @twilio-paste/icons list-icons
- Commit your changes and submit a new PR on Github!
If you run into any issues with creating your icon, double check you've followed all the steps. In the past, we've seen icons that had small artifacts or missing pieces because of the order of layers within a combined shape or union. Try moving layers around to get the shape you need.
Get in touch with the Paste team through Slack at #help-design-system.