Creating original Icons

Follow these steps to prepare your original SVG for use using Inkscape:

Step 1. Download the SVG

Save the SVG file to your computer.

Step 2. Open in Inkscape

Launch Inkscape and open the SVG file.

Step 3. Set Document Properties

• Go to the File menu and click Document Properties.
• In the Document Properties menu, set the Width and Height to 128 px.

Step 4. Group All Paths & Scale the SVG

• Press Ctrl+A to select all paths in the SVG.
• Press Ctrl+G to group them together.
• Click the lock icon in the top toolbar to ensure scaling maintains the SVG's proportions.
• In the input box with the largest dimension, change the value to 128.

Step 5. Center the Group

• Open the Align and Distribute menu.
• With the group still selected, click Align Vertically and Align Horizontally to center the SVG.

Step 6. Ungroup All Paths

• Press Shift+Ctrl+G to ungroup the paths.
• Make sure that none of the paths are grouped.

Step 7. Rename the File

Save the file as <icon>-original.svg or <icon>-original-wordmark.svg.

In this tutorial case ngrok-original.svg or ngrok-original-wordmark.svg

Step 8. Optimize the SVG

• Follow the steps in Optimizing Icons so that the SVG can be used in Devicons.

Your SVG is now properly prepared and ready for use!