Creating Line Icons

A Line SVG is a stylized version of an SVG where the design is reduced to a single outlined path, resembling a line drawing. It removes all fill colors and gradients, using only strokes to define the shapes.

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

• Ensure the original SVG preparation steps are completed.

Step 2. Follow All Steps in "Making the Plain SVG" (If Necessary)

• If the original SVG is too complex, follow the steps to create a Plain SVG.
• An SVG is considered too complex if:
  • It contains more than 1 path.
  • It includes gradients.
  • Had more than 1 fill color.

Step 3. Create a Copy for the Line SVG

• Create a copy of the Plain SVG (or the Original SVG if it’s simple enough).
• Name the copy line.svg or line-wordmark.svg.

Step 4. Open the SVG in Inkscape

• Launch Inkscape and open the SVG file.
• Verify that the paths are not grouped. If they are:
  • Ungroup the paths.
  • Ensure there is only 1 path.

Step 5. Convert the SVG to a Line Style

• Select the path by pressing Ctrl+A.
• Open the Fill and Stroke menu:
  • Go to the Stroke Paint tab and select Flat Color.
  • Change the stroke style px size to make the lines easier to see. I choose 1px for this SVG.

Step 6. Remove the Fill Color

• Go to the Fill Color tab and select No Color (the X button).

Step 7. In the top toolbar, click Path > Stroke to Path.

• Convert the stroke into a path by opening clicking path in the toolbar and then stroke to path.

Step 8. Resize the SVG

• Ensure the SVG is scaled correctly:
  • Click the lock icon in the top-right corner to maintain proportions while resizing.
  • Select the input box with the largest value and set it to 128.

Step 9. Align the SVG

• Open the Align and Distribute menu.
• Ensure the group is selected and click:
  • Align Vertically.
  • Align Horizontally.

Step 10. Update the Path Fill Color

• Change the path fill color to the most prominent color found in the original logo.

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