How to Create a List with Icons in WordPress

A list with icons can make a group of features, benefits, requirements, or next steps easier to scan. A checkmark can identify what is included, an arrow can introduce a sequence, and a shield can support a list of security features.

The icon should support the text rather than replace it. Readers still need a meaningful statement beside every marker, and the list should remain understandable if someone does not notice the icon or its color.

You can build this pattern in WordPress without a plugin by adding emoji to the core List block. For more control, you can use a dedicated block such as List with Icons in VovaBlocks or generate a List shortcode with Shortcodes Ultimate. This guide walks through all three methods and explains where each one fits.

Plan the list before choosing a method

Start by deciding what the list communicates. Icon lists work best when the items are short and have the same relationship to the topic.

Common examples include:

• Product or service features
• Benefits included in a plan
• Requirements for an application
• Steps in a short process
• Trust or security statements
• Items that are included or excluded

Use one consistent icon when every item has the same meaning. For example, a green check can mark a set of included features. Use different icons only when they communicate genuinely different states, and repeat that meaning in the text. “Included: Email support” and “Not included: Phone support” are clearer than relying on a green check and red cross alone.

Keep each item concise. If every point needs several paragraphs, normal headings or separate content sections will usually be easier to read.

Method 1: add emoji to the core List block

The quickest option uses the standard WordPress List block and adds an emoji at the beginning of every item. It requires no plugin and keeps the content in a normal semantic list.

The tradeoff is limited control. Emoji can look different between operating systems and browsers, and they are part of the text rather than separately styled icons. Depending on the selected list style and your theme, the normal bullet may also remain visible before the emoji.

1. Insert a List block

Open the post or page in the block editor. Select the block inserter and search for List, or type /list in an empty block and choose List.

Select an unordered list unless the order of the items is important. The official WordPress List block documentation explains the available toolbar, color, typography, border, and spacing controls.

2. Write the list items

Enter one item per line. Press Enter after an item to create the next one. Keep the wording parallel so readers can understand the list quickly.

For example:

• Fast setup
• Clear documentation
• Email support

At this point, focus on the copy rather than the decoration. Every item should make sense before you add an emoji.

3. Add an emoji to each item

Place the cursor at the beginning of the first item and insert an emoji followed by a space. Repeat the same process for the other items.

You can copy and paste an emoji, use the emoji picker on your device, or insert a Unicode symbol. A simple result might look like this:

• ✅ Fast setup
• ✅ Clear documentation
• ✅ Email support

Use the same emoji throughout a list of equivalent points. Mixing checks, stars, arrows, and decorative symbols without a reason makes the list harder to interpret.

4. Adjust the List block styles

Select the outer List block, then open the Styles panel in the editor sidebar. Available settings depend on the active theme and WordPress version, but they may include text color, background, typography, borders, and dimensions.

Because the emoji is stored as text, the List block's text size affects both the emoji and the item copy. You cannot reliably give the emoji a separate size or color from the sidebar.

Check the list marker style as well. If your theme provides an unstyled or no-marker variation, it can remove the extra bullet. If it does not, keep the default marker or choose one of the plugin methods below rather than adding custom CSS to this no-code approach.

5. Preview the page

Preview the published page on desktop and mobile. Check how the emoji renders, make sure wrapped text aligns acceptably, and confirm that the list remains easy to read.

When to choose this method

The emoji approach is suitable when:

• You need one small icon list.
• You do not want to install another plugin.
• Precise icon styling is not important.
• You are comfortable with emoji rendering differently across devices.
• The possible combination of a normal bullet and an emoji fits the design.

It is less suitable for a reusable branded component. Separate icon controls, predictable rendering, and consistent spacing require a purpose-built block or shortcode.

Method 2: use the free VovaBlocks List with Icons block

VovaBlocks includes a dedicated List with Icons block in its free version. It works inside the native WordPress editor and outputs a semantic unordered list while providing separate controls for the marker and the text.

Every item in one block uses the same icon. That makes the block a good match for benefit lists, feature lists, requirements, and other groups in which every point has the same status.

1. Install VovaBlocks Free

In the WordPress dashboard, go to Plugins → Add New Plugin and search for “VovaBlocks.” Install and activate the plugin. You do not need VovaBlocks Pro to use List with Icons.

VovaBlocks adds blocks to the standard editor instead of replacing it with a separate page builder.

2. Insert the List with Icons block

Open the page or post, select the block inserter, and search for List with Icons. Add the block from the VovaBlocks category.

The block starts with editable list items and a shared check-circle icon. Replace the starter text with your first point. Press Enter to add another item. If an empty item is no longer needed, press Backspace to remove it.

3. Choose the icon

With the block selected, open the Styles panel in the editor sidebar and expand Icon. Open the icon picker, search the included Bootstrap Icons library, and choose a marker that matches the list.

Useful choices include:

• A check-circle for included features
• An arrow for next steps
• A shield-check for trust or security points
• A star for highlights

The selected icon is applied to every item in that block. If one group needs checkmarks and another needs arrows, create two separate List with Icons blocks.

4. Set the icon color and sizes

Open Colors to choose the icon color. Then use Sizes to adjust the icon size and list text size independently.

Start with a modest icon that aligns with the text instead of overpowering it. If color communicates a state, write the state in the item text as well so the meaning does not depend on color alone.

5. Adjust spacing and dimensions

Open Spacing to control:

• Horizontal spacing between the icon and text
• Vertical spacing between list items
• Line height for the item text

The Dimensions panel provides controls for the list indent and margin. These settings are useful when the list needs to align with surrounding paragraphs or when longer items wrap onto another line.

Preview the result at a narrow width before publishing. A comfortable desktop layout can feel too loose on a phone, especially when the icon is large or the item text is long.

When to choose this method

The VovaBlocks approach is useful when:

• You work primarily in the block editor.
• Non-technical editors will maintain the list.
• You want an icon picker and a live visual editing experience.
• Icon and text sizes need separate controls.
• You want consistent spacing without writing CSS or editing shortcode markup.

The tradeoff is plugin dependency. The block's editor controls and styles require VovaBlocks to remain active. It also deliberately uses one shared icon per list rather than a different icon for every item.

Method 3: use the Shortcodes Ultimate List shortcode

Shortcodes Ultimate includes a free List shortcode that adds a custom icon to a normal HTML list. Its settings include a built-in Fork Awesome icon or uploaded icon URL, icon color, indent, and an optional CSS class.

This method is especially relevant when a site already uses Shortcodes Ultimate, mixes the Classic Editor with the block editor, or stores other components as shortcodes.

1. Install Shortcodes Ultimate

In the dashboard, go to Plugins → Add New Plugin, search for “Shortcodes Ultimate,” then install and activate the plugin.

Open the post or page where the icon list should appear. Add a Shortcode block. The plugin's editor instructions recommend enabling Top toolbar from the editor's three-dot menu so the Insert shortcode button is easy to reach.

2. Open the shortcode generator

Select the Shortcode block and choose Insert shortcode in the toolbar. Find List in the shortcode collection.

Choose an icon from the included library, set its color, and adjust the indent if necessary. The official Shortcodes Ultimate List documentation describes the available attributes.

Insert the generated shortcode into the editor.

3. Replace the list content

Edit the generated list items inside the shortcode. A simple checkmark list can use this structure:

[su_list icon="icon: check" icon_color="#15803d" indent="0"]
<ul>
<li>Fast setup</li>
<li>Clear documentation</li>
<li>Email support</li>
</ul>
[/su_list]

Keep the opening [su_list] and closing [/su_list] tags in place. Each item belongs inside an HTML <li> element, and the items are grouped by <ul> and </ul>.

You can return to the generator when you want to select another icon or review the available options. If you edit the markup directly, use straight quotation marks around attribute values.

4. Preview the rendered list

The Shortcode block shows markup in the editor rather than the complete front-end design. Preview the page to see the rendered icon list.

Check that every item appears, the icon loads, and the indent works with the theme. If shortcode tags appear as plain text on the published page, confirm that Shortcodes Ultimate is active and that the markup has not been altered.

When to choose this method

Shortcodes Ultimate can be a good fit when:

• The plugin is already active on the site.
• The site uses both the Classic Editor and the block editor.
• You are comfortable maintaining shortcode and HTML list markup.
• You want to select an included icon or provide an icon image URL.
• Other Shortcodes Ultimate elements are useful to the project.

Its main disadvantage is the editing experience. Authors work with shortcode markup instead of editing a dedicated visual list block, and the output depends on Shortcodes Ultimate remaining active. Migrating away requires replacing the shortcode wrappers.

Which method should you use?

Choose the method that fits both the design and the people who will maintain the content.

Method	Best for	Main advantage	Main tradeoff
Core List block with emoji	A quick, one-off list	No plugin and familiar list editing	Limited styling, variable emoji appearance, and a normal bullet may remain
VovaBlocks List with Icons	Block-first sites and visual editing	Dedicated icon, size, color, and spacing controls	Requires the plugin and uses one shared icon per list
Shortcodes Ultimate List	Existing shortcode sites and mixed editor workflows	Flexible shortcode generator with built-in icons	Markup is less visual and creates shortcode dependency

For a small list that does not need precise styling, emoji are enough. For a polished list that editors should manage visually, VovaBlocks provides the most direct block-editor workflow. Shortcodes Ultimate makes more sense when its shortcode system is already part of the site or when the content must also work in a shortcode-oriented workflow.

Icon list design and accessibility checklist

Before publishing, review the list as content rather than decoration:

• Every item is understandable without the icon.
• Items use short, parallel wording.
• One icon has one consistent meaning.
• Color is not the only way to distinguish included, excluded, successful, or failed items.
• The icon does not overpower the text.
• Wrapped items remain aligned and readable.
• The list works at mobile widths.
• The selected method matches the site's existing editing workflow.
• Someone can update the list later without guessing how it was built.

An icon list is useful when it makes related points faster to understand. Start with clear copy, keep the visual language consistent, and avoid adding icons to long or unrelated paragraphs simply for decoration.

The core List block offers the fastest no-plugin route with emoji. Shortcodes Ultimate provides a shortcode-based option with custom icons. If you want separate icon and text controls while staying in the native block editor, install VovaBlocks Free and add the List with Icons block to your page.