Create Icon for Web Component in the Lightning Builder

  If you create a lightning web component for Lightning Pages, you can quite easily designate a distinctive icon for it so that it can be identified in the Lightning Builder.

Actually, all that is necessary is to add a new file with the extension "svg" to the component's folder. The svg file must have the same name as the component.

The svg file content should contain commands to draw the icon.

Do not understand the topic? There is no cause for concern. You will be able to create simple icons on your own after a very little learning.

SVG stands for Scalable Vector Graphics and it's an image format that defines shapes using XML. The scalable means that you can increase its size without losing quality. This is because unlike images (like png/jpf) that use pixels, the svg only contains instructions on how to draw.

You can open a javascript online tool (like jsfiddle) and paste the following code:

<svg viewBox="0 0 24 24" width="64" height="64" style="stroke: black;">
  <line x1="3" y1="3" x2="21" y2="21"/>
  <line x1="3" y1="21" x2="21" y2="3"/>
</svg>

The output will be

In the <svg> tag you can define the dimension, and inside there is a set of tags that can be used to draw shapes.

In the above example, I simply draw 2 lines each from one corner to the other.

There is much further to explore regarding svg, which is beyond this article. Common tags inside the svg are:

line, polyline (=set of lines), circle and rect (=rectangle). This article provides great explanations of the topic using easy to slightly more complicated examples.

Note that the knowledge for creating svg icons is not limited to the web component icon in the Lighting Builder, but it can also be used for icons within the component html.

If you do not feel like learning, there are many online sites where you can find ready-made svg (check for the license!) or use sites that allow you to get the svg code from an icon (for example https://iconsvg.xyz/)

In any event, the invested time is negligible and enables you to obtain a distinctive icon for the component or series of components that you expose.  In addition, creating icons in itself is the work of experts and it's a huge content world in itself, it's always good to be exposed and get to know other content beyond the Salesforce scope.