How to Easily Add Custom Icons on Squarespace
Icons are an important part of a website that can assist to improve user experience and navigation, as well as personalize your website. Squarespace is incredibly sleek and modern, as a site builder, but has a fairly limited selection when it comes to built-in icons. Custom icons can go a long way in making your website unique or branded if you are trying to make something special.
Imagine the impact of visually representing key actions, drawing attention to important sections, and reinforcing your brand identity through custom icons. Here are a few ways to add custom icons to your Squarespace site, whether that’s through SVGs, Font Awesome, or simply uploading your own images.
In this guide, we’ll show you the easiest ways to add custom icons to your Squarespace website, without sacrificing speed and visuals. Regardless of you are a beginner or an advanced level user if you have the intention to create a unique, creative and inspiring website, in here you are going to find practical solutions.
Installing Font Awesome on Your Squarespace Website
SIGN UP FOR A FREE FONT AWESOME KIT
To get started with Font Awesome, the first step is to visit FontAwesome.com. There, you'll be prompted to enter your email address. Once you've provided your email, you can request your Kit Code by clicking the corresponding option. Now, check your email inbox for a message from Font Awesome and proceed to confirm your email address. Once your email is verified, you're all set to begin the setup process and explore the world of Font Awesome icons.
Embed Font Awesome Code into Squarespace
Follow these steps for a seamless integration of Font Awesome into your Squarespace site. First, access your Font Awesome Kit and copy the Kit Code. It will be structured as follows, with your unique ID replacing the placeholders:
Font Awesome Kit Example:
<script src="https://kit.fontawesome.com/##########.js" crossorigin="anonymous"></script>
Now, navigate to your Squarespace Dashboard and proceed to Settings. From there, head to the Advanced section and locate Code Injection. Here, you can paste the previously copied Code into the Header Box. Don't forget to save your settings, and you're all set to enjoy Font Awesome on your Squarespace site.
Select Your Desired Icon from Font Awesome
Icons Explore this open road of creativity with over 1,577 Font Awesome icons available for free. These icons encompass a variety of categories and styles for your design needs. For your selection, just click the icon that establishes your vision. The corresponding HTML code for each icon is available under it. All it takes is clicking the HTML code to copy it. You are all set to insert that selected icon into your design easily and perfectly, which is what Font Awesome is all about! Consider the options and skyrocket your visual content easily with Font Awesome's selection of icons.
Integrate Font Awesome Icons into a Squarespace Page
Choose the Squarespace page of your preference, insert a code block, remove any existing text, and paste your Font Awesome code. After this, simply click to save your page settings, and you're all set – your Squarespace site is now adorned with Font Awesome icons!
How To Add FlatIcons In Squarespace
Explore Flaticon
Begin your icon quest by seeking the specific icon you desire. Flaticon offers an extensive array of both static and animated icons to choose from. After initiating your search, you have the option to further narrow down your selection by applying filters for color and shape.
Click on the Icon you want to use
Download the Icon
Most of the Icons (our default) will just allow you to change the color. If you sign up for a free account, you can change the icon color to better fit your website design. How To Remove The Added Icon Buttons: You only have to click on the "Edit icon" button in this pop up right top hand corner. Keep in mind that this option may not be there for all icons, so if it doesn't appear on the selections, don't worry.
Add the Icon to your Squarespace site
After choosing the icon that you would want to have, download it and keep it safe with you in your hand. Now it is time to add that icon to your Squarespace website. Click Edit in the Page in which you'd like to add the icon. Now, click on Add Block and choose Image Block. After that, it's just a simple matter of uploading the icon.
When it comes to choosing icons for your website, Flaticon is not the only option you have. For instance, I am personally fond of Flaticon, where you can find a wide range of high-quality icons that can be easily uploaded to your Squarespace site..
How To Add Canva Icons In Squarespace
1. Generate a Compact Canva Document
Our suggestion is to keep your Canva document's height under 150 pixels. Additionally, it's advisable to ensure the width is a minimum of 200 pixels.
2. It provides a wider dimension compared to its height.
3. Go to Elements And Search icons > Graphics
4. Enhance Your Design by Adding Shapes and Customizing Colors to Reflect Your Brand
5. Save the File in PNG Format with a Transparent Background
6. Use An Image Block In Squarespace To Place Your Icon
You have the option to employ an Image Block along with a Text Block positioned either below or beside it. Alternatively, you can opt for an Image Stack or an Image Card Block.
By implementing custom icons in this manner, you can enhance the professionalism, visual appeal, and readability of your website. This, in turn, can result in longer visitor engagement, increasing the likelihood of visitors making bookings or purchases from your site.
How To Add Google Icons To Squarespace Website
Embed Code in the Page Header
Simply copy and paste the provided code into your page header. You can access the page header for this by going to Settings, then Advanced, and selecting Code Injection.
Choose Method to Embed/Reference Icon
Select a method for utilizing the icon on your website – there are three ways to reference or embed it:
Incorporate it within a Code Block and reference it by name.
Attach it to an h4 heading by using a Code Block.
Opt for an h5 heading and employ a Markdown Block to make a reference to the icon.
Leveraging custom CSS provides the flexibility to modify its size, color, and other text-related attributes as needed.
Open Code Block
To incorporate an icon within a code block while editing your pages, follow these steps:
Insert the icon's name into the class attribute as illustrated in this example for the "water_drop" icon:
Copy the code provided below.
HTML:
class="material-icons"
water_drop
Use Markdown blocks to associate it with a heading
Generate and allocate a Font Family (h5) through a Markdown Block — You have the option to assign the icon font family to a particular text style or font family, such as h5. Ensure that you assign the font family to Material Icons by implementing the provided code into your site's custom CSS. Customize the other properties and values that are highlighted in bold as indicated below.
To assign this code to h5, insert it into your site's custom CSS.
Access the Custom CSS settings by following one of these methods:
Go to Settings, then Design, and select Custom CSS.
Alternatively, you can use this URL: "https://your-website.squarespace.com/config/design/custom-css." Make sure to replace "your-website" in the link with your actual website URL.
Copy and paste the provided code into your Custom CSS:
Customize the icons by modifying their size and color using the section highlighted in bold:
CSS:
h5 {
font-family: Material Icons;
font-size: 4rem;
color: blue;
}
Alternatively, adjust the icons to your liking by changing the size and color properties in the following code:
CSS:
h5 {
font-family: Material Icons;
font-size: 4rem;
/* Adjust the size as needed */
color: blue;
/* Modify the color to your preference */
}
Feel free to tailor the size and color to meet your specific design requirements.
To reference the Font Family, utilize a Markdown Block in the following manner while in page editing mode:
Insert a Markdown Block.
Type "##### (name of the icon you want to reference)" within the block.
Link with an Existing Font Family
Please follow the same procedure as previously instructed, but this time, apply the changes to h4. Here's the code to add to the Custom
Customize the icons by modifying their size and color using the section highlighted in bold:
CSS:
h4 {
font-family:
Material Icons;
font-size: 4rem;
color: blue;
}
You can adjust the size and color as needed to achieve your desired design.
Frequently Asked Questions (FAQs)
1. What kind of file format is best for custom icons in Squarespace?
SVG, as a vector format, is lightweight and scalable, which makes it best suited for developing custom icons for the web. For non-scalable use cases, PNG is also acceptable.
2. Can you store icons on squarespace directly?
You’re working off data until October 2023. In Settings → Files, upload your icon and copy the file URL to use on your site.
3. Font Awesome: Can I use icon libraries on Squarespace?
Yes, you can include libraries such as Font Awesome by pasting their kit code into the Code Injection area found at Settings → Advanced. So you can use their icons in the same way as HTML classes.
4. Custom icons will not impact website load time.
Custom icons can also have a very insignificant effect if they are optimized (especially SVG format). Before uploading any icons at all, always compress them to reduce file sizes.
5. We’ll also be saving some space on your Squarespace website.
Yes, use animated icons (like GIFs or animated SVGs). Upload the image file, add it through an HTML block, or use CSS animations on static icons.
6. Can I use my custom icons to replace the default Squarespace ones?
Assuming you are asking about default Squarespace icons (social icons, for example), yes, you can replace them with custom CSS. Find the icon class that already exists, hide it, and place your icon in its stead.
