# How adding a new set icon

## Prerequisites

The font files are generated with [IcoMoon](https://icomoon.io/app/) so please create an account there. You can import the font file itself into IcoMoon to load Keyrune and begin editing.

![import](./contributing/images/import-icon-btn.png)

After importing, a model will ask if you want to "use this font's metrics and metadata when exporting fonts?" Click "Yes" to accept.

![modal-import](./contributing/images/import-icon-modal.png)

🎉 Success! The icon font should be loaded in your IcoMoon project. That will be useful for the next steps when we need to generate the font.

## Summary

1. [Update fonts and svg with the new icon](./contributing/UpdateFonts.md)
2. [Update codebase to handle the new icon](./contributing/UpdateCodebase.md)
3. [Generate associated css](./contributing/GenerateCss.md)
4. [Update the documentation](./contributing/UpdateDocumentation.md)