Element icons appear in the element tray in the Weebly editor and are what users drag onto the page.

Element icons in the element tray

Your icon needs to follow these guidelines in order to display properly in the element tray.

Designing Your Icon

Your icon should convey the element’s purpose and functionality to the user. It may be that your company’s logo is appropriate. But usually you’ll need to design something that better visually describes what your element does. Take a look at the Weebly elements to get a good idea, or visit Iconfinder or The Noun Project for icons you can purchase.

Icon Size

Icons appear within a canvas that is 70 pixels wide X 40 pixels high. The name of your element displays under the icon, so the size of your icon should not be so big that it will crowd the text, but not so small that it will be lost in the canvas.

Icon Color

Icons should be provided in black or with some greyscale. We’ll recolor them to white.

Here’s a guide to follow:

Examples of element icon designs

You can download .png, .pdf, and Sketch versions of these guides here.

Tools for Creating SVG Files

There are plenty of great tools out there to create and edit svg files. Sketch (Mac only) and Adobe Illustrator are full graphic design toolsets for creating vector images, including svg. They’re not cheap, but they’ve got everything you’ll ever need to create full feature web graphics. SVG-Edit is a free online tool for working with svg files. Inkscape is a free downloadable app that works with a number of file types, including svg (Mac users will also need to download XQuartz).

It may be that you already have a great graphic to use for your icon, but it’s a png or jpg instead of svg. Don’t worry - there are a number of apps you can use to convert it! PicSvg is an online tool that converts your file to a monochrome svg file. Be sure to select black as the svg color. Both Sketch and Illustrator can also convert files to svg.


Help make these docs better!