Skip to content

Creating Plain Icons

Alex Canales edited this page Dec 23, 2024 · 1 revision

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.

image

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.

image

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

image

Step 7. Align the SVG

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

image

Step 8. Rename the File

  • Save the file as plain.svg or plain-wordmark.svg.

Step 9. Optimize the SVG

Your SVG is now properly prepared and ready for use!

Clone this wiki locally