Icons are a simple yet powerful way to enhance your website’s visual communication. They’re also an SVG file format with all the benefits that come with it.

Using the Icon element in Kirki, you can quickly add scalable, crisp icons from a wide selection of libraries and customize their appearance to match your design.

Add an Icon

To add an Icon element to your page:

1. Open the Insert panel from the Left Sidebar.

2. Select Icons from the Elements section.

3. Click or drag your preferred Icon onto the canvas.

Replace Icon

Once an Icon is placed on the canvas, you can replace it from the Design Tab:

1. Select your Icon on the canvas.

2. From the Design tab on the Right Panel, click on the Icon name.

3. This will open the Icon Library, where you can browse and search for Icons.

4. Click on the Icon you want to replace it with.

Icon Settings

The Design tab on the Right Panel also gives you access to the following settings:

• Stroke Width — Available on certain Icons, this controls the thickness of the Icon’s strokes in pixels. Enter a value to make the Icon lines thinner or thicker.

• Color – Sets the Icon’s color. Click the color swatch to open the color picker and adjust the value and opacity.

Style an Icon

You can further style your icons using the options on the right panel. 

Learn More about Right Panel.