Creating 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/
  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
    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": "Icon Name",
    "file": "actual-file-name",
    "vue": "[Icon|Pattern]Name",
    "desc": "Description about the icon and where it's used."
    }

    • 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. Once finished, run the following command: gulp svg. This will recompile the entire ./lib/build/svg/ folder. To create new SVGs and build the documentation site, run gulp svg watch.
  7. Verify your changes have been updated on the website.
  8. Commit and push your branch to Dialtone.
  9. Open a pull request.
  10. Once approved it will be merged.