UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Web Design Tips: How to Use Icons on a Landing Page

--

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 of them, 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 starscould 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.

Originally published on Icons8 Blog — check it for more design stories from our team

About the author: Tilda Publishing team, the creators of the easy-to-use and elegant website builder.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

UX Planet is a one-stop resource for everything related to user experience.

Get 1.3M+ icons in the needed format, size and color. We add new designs daily. As well as photos, music, vectors, tools, and articles. https://icons8.com/

Responses (1)

Write a response