Before designing a new icon
The first thing to do is to check in our current library if there is no icon that can serve the purpose you need for your design.
You can do that by checking all the available icons in the documentation or by looking into the Figma UI Kit.
Design the icon
In case you can't find an icon in Forma 36 for your purpose, you can design a new one and present it to our designers for feedback and approval.
Create React components
To add the new icon to Forma 36, you will need to a React component in /packages/components/icons/src using an SVG.
These components should return the product of the generateIcon function from @contentful/f36-icon package. This function demands an object as an argument which needs two mandatory properties: a `name`, and a `path`.
Please use a descriptive name for your icon (e.g. ArrowForward, ArrowDown, ArrowUp), and use your SVG for the path.
This will create the basic icon. It would be nice to create a trimmed version of the icon, and for that you need to add two properties to the object passed to the generateIcon function: a viewBox property with the view box dimensions of the SVG, and trimmed: true to tell the function to trim that SVG.
Lastly, you need to export your new components at /packages/components/icons/src/index.ts.
Check this PR as an example of what needs to be done in code to add a new icon.
Opening the Pull Request
After the code is finished, open a PR and wait for our team's review and it's done!