You can now elevate your website’s branding with SVG icons for your site logo.
Astra’s version 4.7.0 introduces the exciting Logo SVG Icon feature, allowing 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.
Let’s get started!
How to Access the Logo SVG Icon Feature
Note: Please ensure you have the Astra free theme installed and activated on your website.
- Navigate to your WordPress dashboard.
- Go to Appearance > Customize.
- In the customizer sidebar, click on Header Builder.
- Select Site Title & Logo.
- Enable the Use Logo SVG Icon toggle.
- You have two options for creating 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.
7. Once you select the logo, click Publish to save the changes.
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 check the below attached GIF showing how Logo SVG Icon works in action:
We hope this documentation empowers you to leverage the Logo SVG Icon feature and create a stunning logo for your website.
If you have any questions or require additional support, feel free to leave a comment below or reach out to the Astra support team.
