Where to Find Free Graphics and Icons (and how to use them effectively)
If you’re someone who’s DIYing your own website, you can probably relate to the struggle of finding beautiful, high-quality graphics that won’t break the bank.
You want to add a little something extra to your site, something that makes your design stand out from the crowd, but hiring a professional graphic designer can cost a fortune. And that is exactly why we’re going to let you in on the ultimate DIY hack - sourcing free graphics and icons to use on your website!
In this post, you’ll receive practical tips for finding professional-quality visuals and advice on how you can use those visuals to enhance your website’s appearance and usability.
No gatekeeping here, this info is too good not to share!
Why Visuals are so Important in Website Design
The truth is, people tend to browse a website visually before actually reading the content provided to them.
They may briefly scan the site as a whole, looking through each page for something to catch their attention, or simply rely on the single page they land on to draw them in. Either way, the visuals you use on your website are vital. Not just for the overall aesthetic, but for ensuring that potential clients or customers stick around and enjoy the experience.
In addition to classic photography, visual elements can fall under a couple of categories:
Graphics: Images that are composed of photographs, text, and other artistic elements like illustrations or shapes. Graphics can be used throughout your site to showcase various things like an email sign-up or course offering and can also be a great way to spruce up an otherwise plain photograph to match your business’ branding, creating dynamics on the page.
Icons: Icons are smaller illustrative elements that can be added to your website for both design and functional purposes. This might include an illustration or drawing used to either break up information or signify a specific element (ex: replacing a bullet point with a custom checkmark or displaying a unique illustration for each item of a “what’s included” section).
At Big Cat Creative, we love to use graphics and icons on both our own website and within the Premium Squarespace Templates we create!
On the BCC website, we utilize these tools to maintain a cohesive and unique brand identity. Mixing intentionally designed graphics and descriptive icons to create a story and help guide the visitor’s journey throughout our site.
We also include visuals within our Squarespace Templates to showcase how an icon or graphic can be super impactful to the user experience. Take our Ava Grand Template for example:
Icons are sprinkled throughout to organize and add interest to the text as well as to drive home the brand identity. Always remind the user what the business stands for and what they can expect (even if they aren’t actually reading the content).
The bottom line is that visual elements are totally necessary to include within your website design, however, they can either be pricey to obtain or tricky to source on your own. But have no fear! In the next section, we are sharing some of our fave places to find FREE graphics and icons. Oh yeah, your life is about to get so much easier.
Finding Free Graphics and Icons
Let’s talk about some of the top-notch resources where you can find super useful free visual elements (that are also stunning, by the way). Between all of these options, you’re sure to find something that works for your brand!
1. Canva
Canva truly is a one-stop shop for all things visual! You can find expertly designed and totally customizable graphics, free stock photos to use within your graphics (if needed) and icons from every category you can imagine.
The free plan gives you access to more than enough to choose from and allows you to make all kinds of design tweaks (color, size, fonts, etc.) to ensure that everything is brand cohesive. They even offer animated stickers and allow you to save GIF files, which means more creative freedom.
Canva is also extremely valuable for creating your own graphics and icons from scratch. Their platform is super user friendly (aka you don’t need to be a professional to use it!) and allows you to upload individual elements from your computer, which means you can take files you find elsewhere and plop them into Canva to edit the colors and/or create an even more fun and unique composition. We'll talk more about this later in the post...
👉 How to Change the Color of your Images and Graphics in Canva for FREE
2. Flaticon
Flaticon is the ultimate hub for free icons and illustrations. They have both regular and animated icons as well as beautifully designed stickers that you can download and add straight to your website!
The platform is very easy to navigate as it allows you to search both broadly by category (icons, stickers, or animated) as well as more specifically by typing in any keywords for what you’re looking for. For example, if you needed a flower icon, you could search “flower” in the search bar and every option that falls under that category shows up.
You can then browse through what’s available and even filter the results further by color, shape and trending.
Note: Flaticon’s free plan does require you to give attribution when using icons on your website (ex: “Icon made by Pixel Perfect from flaticon.com)
3. Noun Project
The Noun Project is a platform that offers access to thousands of visual elements, including a library of icons made by designers all over the world.
You can search their large collection (which also includes stock images) by typing in keywords or specific styles to find exactly what you’re looking for. They also organize their icons into “icon sets” which are groups of icons that all fall under the same category and are designed by the same person. This is especially helpful if you’re creating a themed graphic or need multiple icons that have a similar aesthetic.
All icons from Noun Project can be downloaded for free in their basic, uncustomized form. However, they also offer an affordable subscription option starting at $3.33/month that allows you to download an unlimited amount of icons and make customizations to the color, background, shape, and more.
Note: Noun Project’s free plan does require you to give attribution when using icons on your website (ex: “Icon made by Matt Brooks from thenounproject.com”)
4. Google Fonts
Did you know that Google Fonts also has an extensive library of completely free icons?! This resource is not to be missed as they have thousands of simple and comprehensive icons that could work for any type of business.
When browsing through their collection, you are able to filter the overall list by specifying fill, weight, style, category, and more, which makes finding what you need so much easier.
They also provide a ton of different options for actually downloading the icons you like.
Before downloading, you can choose to customize the size and color of the icon. You’ll then have the option to save the file as either a PNG, if you just want the icon as an image, or an SVG, if you’d like to further customize the icon in a different design platform like Canva or Illustrator.
In addition to that, they also provide multiple pieces of code for more advanced usage of the icons and instructions on how to use the icons on iOS and in Android Studio, if that’s something you’re interested in.
5. unDraw
Last but most certainly not least, unDraw is a unique collection of illustrative icons that range from simple to super detailed.
Because a lot of the icons that unDraw offers are more detailed than usual, they can really make an impact when used individually on your website, yet they’re also perfect for adding into a graphic composition to show more personality and flair!
You can use the Search bar to type in specific keywords as well as their handy color generator tool to match the icons to your individual brand identity. The color generator allows you to choose a color from the color picker or enter in a unique HEX code to get the most specific results possible.
And once you’ve found an icon that you love, you have the option to save as either a PNG or an SVG which allows for even more flexibility in editing and customizing.
The best part is that unDraw has a completely open license, which means that you can use the icons anywhere you’d like without any attribution required.
How to Ensure that Your Graphics and Icons are Cohesive Across your Website
As fun as it can be to search the thousands of available graphics and icons out there, it can also be easy to get carried away and forget that these visuals are meant to fit into your existing business and brand.
This means that any visual elements you choose should work together and maintain a unified brand experience.
This kind of cohesion can be accomplished in a few different ways.
Color
This one is pretty obvious, but you’ll want to stick to the colors that your brand already uses and keep in mind the overall use of color on your website.
If your site is pretty minimalistic, then allow your graphics and icons to follow suit. For example, if you mostly stick to neutrals, don’t throw in a bright red "X" icon just because it fits the point you're trying to convey. Instead, search for a neutral-colored "X" (or whatever color fits your brand).
Many of the resources we mentioned above offer color generators which you should definitely utilize! And if they don’t, you can change the colors in a separate design software like Canva or Illustrator.
Style
When it comes to visual elements, find a style that fits your brand and stick with it.
With icons you could choose between:
Simple Outlines vs Cartoonish Illustrations
Thin Lines vs Thick Lines
Filled Shapes vs Outlined Shapes
With graphic compositions you could choose between:
Busy and Bold vs Sparse
Photography Heavy vs Text Heavy
Super Colorful vs Neutral
Whatever fits your mood, lean into it and remain consistent with that style!
A helpful tip for this is to download sets or packs of icons so that you know that they all fit into the same style family. You can also create graphic templates on Canva that will help you stick to the same overall aesthetic even if you need to tweak the information.
Quality
This might not be as obvious, but it’s super important to ensure that all of your content is the same file type and quality.
If you have 2 icons next to each other and one is crystal clear and scaled to a nice size but the other is slightly pixelated and a bit wonky looking, it immediately brings you out of the viewing experience. Visitors will start focusing on the weird quality vs what the content is trying to convey!
The heart on the left is lower quality which makes it appear dull and blurry while the heart on the right is high-res and shows up clear and sharp.
Downloading all icons as large and high-res as possible is usually the safest bet! And if you originally downloaded something as an SVG to further customize it (in a separate design platform), make sure to save your final customized icon as a high-res PNG or JPG as Squarespace doesn't support the upload of SVG files.
For Graphics, make sure that any photography being used is good quality (from the same source if possible) and all final file types are the same to avoid differences when uploading to your website.
But what if you’re having trouble finding graphics and icons that truly fit your brand’s aesthetic?
Why not make them yourself...?!
We mentioned earlier how you can create your own visuals using Canva’s super user-friendly platform and also hinted that you can make tweaks to colors and fonts using other design software like Adobe Illustrator. To make things easier for you, here’s a list of various design tools (some free, some not) that you might find helpful if you ever need to create your own visuals:
How to Place Graphics and Icons on Your Squarespace Website
Now that you’ve sourced and downloaded a bunch of high-quality and aesthetically pleasing visual elements, let’s walk through how to actually add them to your Squarespace website.
First things first, head into your Pages Panel by navigating to your Main Menu > Website > Pages and choose the page you’d like to add your new graphic or icon.
Once you’re on the right page, click Edit in the top left corner of your screen to enter editing mode.
You can then find the section where you’d like to add your content and click Add Block in the top left corner. From here, choose the Image Block.
Move the image block wherever you’d like within the section. Then click within the block and choose the Pencil Edit Icon to open up the Settings Panel.
You can then either click on the “+” to upload your image or simply drag it in from your computer. Both individual icons and composed graphics can be added this way!
You can then resize your image to fit the existing section content, and under the Design Tab of the Settings Panel you can also adjust the fill and shape of your image and play around with a few additional design customizations.
👉 How to Resize and Crop Images in Squarespace 7.1 Fluid Engine
When you're finished customizing, you’ll end up with a creative and intuitive design that is both visually exciting for visitors who are scanning the page and functional - hopefully enticing people to remain invested!
See below for some examples in action:
At the end of the day, premium graphics and icons really can help to give your website a professional and cohesive look, ultimately leading to a one-of-a-kind user experience that keeps visitors interested and wanting more!
These visual elements look great, help to guide users through your site, and emphasize a strong brand identity.
We encourage you to play around and experiment with all of the resources that we’ve mentioned in this post to see what works best for your business. You don’t have to be a “professional designer” in order to make magic happen for your website and you definitely do not need to empty your wallet in the process of trying!
And don’t forget that all of our Premium Squarespace Templates are designed strategically to make adding your own graphics and icons a piece of cake, so be sure to check them out if you’re looking for a place to start! 💻👇
If you liked this post, Pin it to Pinterest! 👇🏻
