EspañolFeature list with check icons in HTML and CSS
Write one item per line. For a title and description, separate them with |. Choose the icon, colors and columns.
How to useBenefits people read at a glance
Available in: 
Feature list with check icons in HTML and CSS: what it is for
Turn your product or service's list of benefits into a list with icons: check, check in a circle, arrow, star, heart or lightning bolt, with or without a background circle, in one or two columns and in your brand color. Each item can have a title and description, separated by |.
The icon comes from CSS, with a small SVG used as a mask and painted by the --icon-color variable, so the HTML stays a plain list that Google and screen readers understand, and changing every item's icon means editing one line.
How to use
- Write the items, one per line.
- Choose the icon, columns and color.
- Copy the code to your site.
When to use it
- The benefits section of a home page.
- What's included in a plan.
- A service sales page.
Frequently asked questions
Why does the icon come from CSS?
Because the HTML stays clean, a plain list with li, and the icon is decoration: screen readers only read the item text, and you change the icon for every item by editing one line of CSS.
How does the icon work without an image?
Each item has a pseudo-element with a small SVG used as a mask (mask-image) and painted with the color you chose. It works in all current browsers and the color changes via the --icon-color variable.
Where should I use a feature list?
In the benefits section of your home page, a service description, next to a plan's price and on sales pages. Start each item with the result for the customer, not the feature.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.