Icon Maxi block

Choose from thousands of icons, lines and shapes, and insert them anywhere on the page. They can be informative, fun, or simply visually sweetening your page.

Understanding SVGs: the difference between stroke lines and filled shapes

At Maxi, we know that working with SVGs can sometimes be confusing, which is why we want to explain the difference between SVGs with a stroke line and those with filled shapes.

SVGs with a stroke line have an outline or border, typically in the form of a line, that surrounds the shape. This can be useful for adding emphasis to specific areas of the image or for creating a more defined shape.

SVGs with filled shapes do not have an outline or border. Instead, the entire shape is filled with a colour or pattern. This can be useful for creating solid shapes, such as buttons or icons, or for creating complex designs with multiple colours and shapes.

Filled icons

Our filled icons come with both a stroke and a fill that can be easily adjusted to match the design of your website.

To change the stroke and fill colours of your filled icons, simply select the icon you want to modify, and then use the colour picker to choose the desired colours. You can change the stroke and fill colours independently, allowing for even greater customisation.

In addition to the colour options, you can also adjust the stroke width of your filled icons. This is useful when you want to make the stroke more prominent or to give the icon a unique look. To change the stroke width, select the icon and then adjust the stroke width setting in the options panel.

To add an SVG icon to your Maxi Blocks page, simply click on the "Add Block" button and choose the "SVG Icon Maxi" block from the available options. Once selected, click on the "Insert" button to insert the icon onto your page.

Solid icons

One of the benefits of using shape icons with no stroke line is that they provide a cleaner and more minimalistic design. These icons also allow for more emphasis on the shape and fill colours, making them a great option for websites that want to focus on colour and shape as design elements.

To customise the shape icons, you can adjust the fill colour and size. You can also add hover effects to the icons to give them an interactive feel. The Shape Icon Maxi block offers a wide range of customisation options to help you create the perfect design for your website.

Line icons

One of the benefits of using line SVG icons with only the line width change option is that they provide a simple and elegant design. These icons also allow for more emphasis on the line width and the use of negative space, making them a great option for websites that want to focus on minimalism and clean design.

To customise the line icons, you can adjust the line width and colour. You can also add hover effects to the icons to give them an interactive feel.

Customisation

Icon colour can be quickly changed from the toolbar. If the icon has a stroke line, you will see an additional option for it.

More settings are located in the block settings sidebar.