Logo SVG Icon

You can now elevate your website’s branding with SVG icons for your site logo. With Astra, you can use SVG icons as your website logo. It allows you to add crisp and scalable vector icons as your website’s logo.

In this article, we’ll show you how to use SVG icons as logos.

How to add a Logo SVG Icon

To see the Logo SVG Icon feature, please ensure you have the latest version of the Astra theme installed on your website. Once that’s done, follow the steps shared below:

1. Navigate to Customize > Header
2. Select Site Title & Logo.
3. Enable the Use Logo SVG Icon toggle.

There, you will see the following two options to create your logo SVG icon:

• Icon Library: Astra offers a built-in library of pre-designed SVG icons you can choose from. Simply browse the library, select your desired icon, and it will be set as your logo.
• Custom SVG Code: For more creative control, you can paste your own custom SVG code into the “Custom” tab. This allows you to use any SVG icon you find online or create one yourself.

Once you select the logo, click Publish to save the changes.

Additional available options: With the SVG Logo Icon, you can use the following additional options to style the logo:

• SVG Logo Gap – Apply a gap between the logo icon and the site title
• Logo Width – Change the logo width according to your requirement
• Switch to the Design tab, and you can apply Logo SVG Icon Color (Normal and Hover)

Important Note: While using custom SVG code, some default options like “Logo SVG Color” and “Logo Width” might not function as expected. This is because different SVG codes have unique attribute values that can override these controls. You can choose to skip using a few attributes such as “width”, “height”, and “fill” in the custom SVG code, so the customizer option will work fine.

Q. Can I use both logo and Logo SVG Icon together?
Ans. No, you can use either the logo image or the Logo SVG Icon. If you have an SVG Logo file, you can simply select the file as your logo, and it will not need any SVG Icon.

Q. I do not see the Logo SVG Icon option in the customizer. Why?
Ans. If you do not see the Logo SVG Icon option in the customizer, please make sure you are using the latest version of the Astra theme and no logo image is being used. If a logo is selected, simply remove it to see the Logo SVG Icon option.

We hope the above instructions were helpful in using the Logo SVG Icon feature and creating a stunning logo for your website. If you have any questions or require additional support, feel free to reach out to the Astra support team.