How-to

Design How-to: Improve your website design with icons

Add icons to your responsive website

We recently released a gallery of customisable icons for responsive pages! Icons work great in 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 pages?

  • Visual interest: Add in place of images for a clean, minimalist feel. Think about location – where to add them break up your page content and complement your site layout.
  • Support content: Drop alongside text blocks to convey ideas and as an accompaniment to your page content.
  • Draw attention: Emphasize sections of your page to help users navigate your website.
  • Link integration: Use to highlight important links, e.g. social pages or contact details. We’ve included a range of options to cover all major channels, including Facebook, Twitter, Instagram, Pinterest and Vimeo.

 

Adding an icon to your responsive page

 

Adding an icon to your responsive page

Ready to add an icon to your responsive page? Once you’ve added a section to the page, you should see grey columns displayed where you can add your page content.

 

  • Click on a column, then from the four options choose ‘Icon’.
  • You’ll have the choice of two icon packs, ION and ET. ET offers finer, line-based icons. You might choose to stick to one pack to ensure the icon styles match each other.
  • Click on the icon to add it to your column.
  • Open the right side panel using the arrow icon in the top right corner of the editor. Here you can customise the size, colour and alignment of your icons, and set up hyperlinks to other pages of your site or social channels!

To see a full list of responsive page guides, you can visit our help area here. Try them out and let us know what you think below!

 

Ready to build a website or online shop? Get started here with our 14 day free trial.

 

 

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save



More posts by this author


One Response to “Design How-to: Improve your website design with icons”

Add a comment to web design

  • (will not be published)

More posts by this author