3 Ways icons can improve your site design

We recently released a gallery of customisable icons within the responsive website editor. Icons are perfect for responsive grid-based layouts, and our selection covers a range of different themes including tech, creative and social media. So, why should you consider adding icons to your website?

Convey your brand

Icons are great for adding personality and individuality to your pages. They can help to create a visual representation of what your business or brand is about. Digital marketing agency DRAP use icons matching their website colour palette to add a sense of fun to the minimalistic header section. Style icons to match your brand messaging – are you trying to convey creativity and playfulness, or develop a feeling of trust?



You can select and place icons directly through the Moonfruit responsive editor – check out our guide to getting started adding icons to your pages. Add a personal touch by styling your icons in-editor – including selecting colour, size, hover effect, and animation.

Support content

When used in web design, icons can help to make content more understandable and memorable. Drop alongside text blocks to convey ideas and as an accompaniment to your page copy.

Icons supporting content work especially well for product features, services, or when communicating steps in a process.  Notice Stripe‘s subscription page below, which uses icons to illustrate the benefits of using their API. You’ll often see icons placed alongside a heading and short paragraph, either stacked or in a row of columns like the below example.



Icons can also be a really helpful way of keeping visitors interested, especially when used within large blocks of content. Think about location of your icons strategically, to help break up your page copy and complement your website layout.

Link integration

Icons can be used to link to internal or external pages and social channels, or other areas of a page. Replacing text links with icons provides a much cleaner, streamlined feel to your site. It’s important when using icons – particularly as links – to keep clarity in mind, making sure that the meaning of your icons is easy to interpret.

Graphic designer Etienne Goddard uses arrows within his website header linking to other sections of the website, to create an interesting transition between content.



In the Moonfruit editor, you can link any icon to another page, an external website or even another section within the page in a couple of clicks. When it comes to social icons, we provide a range of options to cover all major channels, including Facebook, Twitter, Instagram, Pinterest and Vimeo. Add icons individually, or use our all-new social icon app.


Get your business or passion online with a beautiful responsive website from Moonfruit. Start today with our 14-day free trial.