Element icons appear in the element tray in the Weebly editor and are what users drag onto the page.
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.
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.
Icons should be provided in black or with some greyscale. We’ll recolor them to white.
Here’s a guide to follow:
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
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