Creating Plain Icons

A Plain Icon is a simplified version of an SVG file that contains only one unified path, no gradients, no strokes, and uses a single prominent fill color.

Step 1. Follow All Steps in "Making the Original SVG"

Ensure you complete all steps outlined in the Creating Original Icons section.

Step 2. Determine If You Need to Create a Plain SVG

If the original SVG is simple enough, you do not need to create a plain SVG. To be considered simple, the original SVG must meet the following criteria:

• Contains only 1 path.
• Has no gradients.
• Has no strokes.

Step 3. Create a Copy for the Plain SVG

If required, create a copy of the original SVG and name it plain.svg.

Step 4. Open the SVG in Inkscape

• Launch Inkscape and open the SVG file.
• Check if the paths are grouped. If they are:
  • Ungroup the paths.

Step 5. Combine All Paths

• Select all paths.
• In the top toolbar, click Path > Union.
  • This ensures there is only 1 path in the SVG.

Step 6. Update the Fill Color

• Change the fill color of the path to the most prominent color found in the original SVG.
  • Make sure the SVG does not have any stroke colors

Step 7. Align the SVG

• Ensure the SVG is:
  • Vertically aligned.
  • Horizontally aligned.

Step 8. Rename the File

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

for example ngrok-plain.svg or ngrok-plain-wordmark.svg.

Step 9. 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!