Adding new icons

General Workflow

Adding a new icon to the kendo-icons repository is a two step process:

• Create the Icon as SVG
• Commit the Icon to the repository
• Generate Icons Metadata

Create the Icon

1. Create your icon in Adobe Illustrator and follow the guidelines described in https://www.telerik.com/design-system/docs/foundation/iconography/styles-and-guidelines/
2. The final file is saved (exported) together with the canvas and these properties:

Commit the Icon to the repository

1. Create a Branch with a meaningful name (e.g. "sparkles") and a meaningful commit message (e.g. "feat: add sparkles icon").
2. Copy the newly created SVG icon in the src/telerik-icons/solid folder.
3. Create a Pull Request from the new branch and specify the category in which the icon should be, as well as alias names if any in a comment.
4. The Front-End team is automatically assigned for pull request review and will handle the metadata generation(described in next steps).

Note

Each SVG should contain the following:

• <?xml version="1.0" encoding="utf-8"?>.
• Width, height and viewBox - <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">.
• Only one <path...> inside.

Generate Icons Metadata

1. Run npm run update-icons to update the icons.json and icons-list.json files.

2. Open the icons.json and fill in the relevant icon categories for the newly added icon, e.g:

     {
           "name": "caret-tr",
           "ligatures": [],
           "aliases": [],
           "categories": [ "navigation" ],
           "unicode": "e000"
       }
   

3. Fill in the aliases and ligatures fields (if there are any).

4. Stage and commit* the updated icons.json and icons-list.json.

5. Push the changes.

6. After the new icon and the updated files are pushed, an additional commit will be automatically generated with the updated font and styles referencing the new icon.

*Please follow the commit message guidelines described here: Commit Message Guidelines Wiki.