In the era of scanning and skimming through content, it’s vital to catch the eye of the potential customer. Even if you have a good product or service and an excellent copy, without proper presentation, it risks being passed by a potential customer.

The team behind the innovative website builder Tilda continually researches the best practices of web page design to apply in our product. Together with Icons8, we decided to share ways of applying icons in landing pages to make your offer visually outstanding.

The article is full of examples. We provide links to all examples, so you can take a look at real pages, get icons from examples and even try them out easily and for free with a landing page builder.

So, let’s get started!

Make a List Look Good

Structured information is easier to read and memorize, that is why lists are a part of web page design language HTML. We use and see lists every day: features, services, advantages, why to choose us, how it works, plans and options.

The simplest way to use the web page estate effectively is to spread your items horizontally. Here is an example:

IBM Watson landing page

However, without visual anchors and lack of contrast visitor skims through that list. If a designer didn’t spend the time to decorate that block, why a reader should spend his time to consume that information? Is it so important?

Let’s compare 2 ways and you can tell which one is more memorable and friendly.
A structural block of facts without icons:

Or a structural block of facts with icons:

As you can see visual information representation is more eye-catching, that is why Apple uses it.

Footer block on iPhone X landing page

Make unordered lists look nice

The obvious way to make a list look nice is to use a checkmark:

Stripe’s partner program page

Fitness coach landing page template by Tilda

Highlight features

If it’s hard to find metaphors for your items simple bold ordering will help.

 

A basic landing page template without images looks better than a simple ordered text list.

To get number icons easily search for “number 4” or “circled 4” on Icons8.

Even if you can put items in the order consider emphasizing items with a horizontal list.

A tour landing page on Tilda uses big dots and horizontal items instead of a simple list.

If you don’t want to bother with the creation of a circle in any graphics editor just search for “filled circle” on Icons8 and recolor it easily.

 

Give emotional touch to advantages

Visual metaphor catches the visitor’s eye and helps understand the meaning of your message.

Advantages block in Tilda’s company landing page template

Give visual synonyms to services

One of the standard services blocks in Tilda Publishing

Let’s quickly redesign the world-class consulting company website.

Here is the page section before redesign:

Booz Allen Hamilton expertise page

And here is the redesigned version with icons. We will use Windows 10 style icons. Which one do you like more?

Redesigned services block for Booz Allen Hamilton

Apply branding color to your icons

Take an extra step and colorize icons for your landing page like this:

Xero landing page

Intercom live chat landing page

Stripe partner program page

Icons8 has multiple color schemes for any icon. Colorization dialog allows you to change any color of multicolored icons.

Icons8 different color styles for the icon in the right column.

Icons8 recolor module dialog, where you can change multiple colors of an icon.

Add some weight to the icons with background shape

Sometimes there’s not a lot of words in your list of advantages, but don’t worry, just add a background shape to each icon to make them bold and consistent.

Tilda’s apartments landing page template

Shopify uses circle shapes to unify different form of icons on their home page:

Use flexible background configuration in Icons8 to fit your style.

Separate Blocks

Visual anchor of a section

If we think about page sections as a big portion of our offer it becomes clear that these parts are actually lists, so why don’t to catch a visitor’s eye with icons for each section?

A web service landing page template section uses an attachment icon

A vacancy landing page uses circled number icons as a section divider

Location icon used in a conference landing page template

Multiple icons together (cup, heart, croissant) on a coffee shop landing page

Original divider

Everything new is well-forgotten old 😉 Originally used in book design, text breaks aren’t often seen now, probably only in long reads:

“Text breaks—those places where the author wants to insert a space, but not a new chapter or section—lots of authors use them, and they often create problems for book layout.“ (8 Solutions to the Text Break Dilemma)

However, the part separator is one of the Medium formatting options:

And Tilda Publishing has a whole range of them:

Basically, any simple shape in material style (filled and flat) like 3 dots or asterisks, leaf or stars could be a part separator.

 

Clarify pricing plans with metaphors

Pricing plans is a very popular block type on landing pages. It’s very important to communicate pricing clearly to a potential customer, that is why companies use icons for the better separation of pricing plans.

Lever pricing page

Algolia pricing page

Toggl plans block

Digital Ocean pricing page

One of Tilda’s pricing plan block encourages a creator to specify an icon of each column

Don’t Be Boring

“You cannot bore people into buying your product” (David Ogilvy, an advertising tycoon)

Construct attractive hero images

If content marketing is king you want your articles to outstand because sometimes an article is a landing page.

Hero image in Realtimeboard blog post consists of icons

Sprout Social use icons almost in all article previews

Auth0 chose the minimalistic way of illustration for their articles – one icon

Heap Analytics uses icons in some blog post previews to show the type of a content

Tilda’s repair service landing page template has a cover image made from icons of devices

To create a simple preview of your content for social networks consider Cosmic Pedro by Icons8 or Emoji Pics Composer by Amplifr.

Create meaningful clickable buttons

Buttons are a crucial part of any call to action block in landing pages. Many marketers prefer clean big CTA buttons without distraction. Chances are you have many buttons on the landing page and they would better be different and have clarity on what happens after clicking on them.

A simple arrow means another learning more page.

Even with clean custom made photos Square uses icons to illustrate the meaning of the links in the list of landing pages.

Among many CTA blocks and forms, Tilda has a button with icons for popular cases like downloading a file or watching a video.

File type icons could be used to show what kind of the file the user will get or what type of the media content will be shown by the link.

Quickbooks landing page uses circled play icon for the watch video button

Get positive feedback

For any product or service, a customer feedback is a signal if a business does things right or wrong. Collecting customer feedback might be not easy, but you should ask for an assessment of the work/newsletter/article/product. Here is how Medium does it with an applause button:

According to Hubspot getting a comment is much harder than a “like”.

But even a “like” button is worth of designer’s attention. Would you rather click on a button with an icon or without it?

With Tilda’s vote block you can customize images and use feedback icons from the Icons8 library:

Make ordinary look attractive

Icons add a taste to any dry content.

Airbnb careers page

Dropbox landing page

A contact block in cafe landing page template by Tilda

Use Icons as Logos

Sometimes you don’t need a logo but the page looks solid with it. Many small businesses or sub-products of big brands have a simple logo for differentiation and just to be clear.

Baremetrics uses geometric shape icons for each big feature in their product

Tilda’s summer camp landing page template uses tent icon on the cover block

Conclusion

Creation of attractive landing pages may not require huge efforts if you have just some inspiration and a couple of good tools:
– The icon library with search and icons customizations like Icons8
– Webpage builder with a good blocks library like Tilda Publishing

Try to apply the cases from the article on your current or the next landing page, measure conversion and tell us about results!

Find it useful? Share with those who may use it too.

About the author: this is the guest post by Vlad Korobov from the Tilda Publishing team, the creators of the easy-to-use and elegant website builder.

Check the useful tips on choosing effective images for landing pages and read why favicon is vital for website usability.