Adding Icons

A quick guide for how to add icons to Dialtone.

Most icons in Dialtone are pulled from Google’s Material Icon Library. Before introducing a new icon into Dialtone, ask the following questions:

  1. Is the use of this icon consistent with how it or similar icons are used in Dialtone?
    For a consistent, harmonious user experience, icons need to be used consistently across Dialpad’s products. An icon that represents one type of content or action in one area, must also be used similarly in another area.
  2. Can I use another icon already in Dialtone to achieve the same purpose?
    Every icon introduced is yet another thing that our users must parse and learn. Whenever possible, consider using a pre-existing icon that captures the essence of what you are trying to communicate and clarify further with a label.

If you need to add an icon into Dialtone, here’s how you would go about doing that.

  1. Has the Senior Designer or Design Team approved the use of this new icon in your designs?
    If not, the designer should seek that out in a Design Review or 1:1 with their Senior Designer.
  2. Once approved, the designer needs to add the icon to the Dialtone Icon Figma library file. Instructions for how to properly add an icon into the library file are provided in that file.
  3. Once added and exported from Figma, create a new branch in Dialtone with the word "icon" in the name.
  4. Place the exported SVG file(s) in the appropriate folders:
    • For system icons: ./lib/build/svg/system/
    • For brand icons: ./lib/build/svg/brand/
    • For patterns: ./lib/build/svg/patterns/
    • For spot illustrations: ./lib/build/svg/spot/
  5. Add icon or pattern information to the correct data file. System, Brand, and Pattern SVGs all have their own icon data file.
    • System icons: ./docs/_data/svg-system.json
    • For brand icons: ./docs/_data/svg-brand.json
    • For patterns: ./docs/_data/svg-patterns.json
    • For spot illustrations: ./docs/_data/svg-spot.json
    The data is pulled from the data files in the ordered it's entered, so you must place it in alphabetical order in the data file. Here is an example of information you must provide is:


    • Name: This is the name that will appear on the Dialtone website.
    • File: This needs to be the exact name of the file minus the .svg file type.
    • Vue: This is what the compiled name will be. This is generated by Dialtone, using the above file name. It adds the word Icon or Pattern depending on the SVG type. The file name is PascalCased next to it. For example, a “label” file would be IconLabel. An “international-calling-alt” file would be IconInternationalCallingAlt.
    • Desc: This is a description about the icon and where it is used.
  6. Verify your changes have been updated on the website by running npm run start and navigating to localhost:4000. If you would like to verify your final output svg file run npm run build and look in the ./lib/dist/svg folder
  7. Commit and push your branch to Dialtone.
  8. Open a pull request.
  9. Once approved it can be merged into staging and will go out in the next dialtone release.

A note on theming

Spot Illustrations allow for theming, meaning the primary color of the illustration will change when the theme changes. If your spot illustration svg contains a fill or a stroke with the dialtone primary color #6C3DFF then it will automatically change when the theme's primary color changes.

You may often wish to derive lighter or darker colors based on the primary color when making a spot illustration. In these instances it is recommended to set opacity while still using the primary color as the base color so these colors will also change with the theme.