OneTaskBy Tim King · Updated
Trust Badge Strip Generator
Secure Checkout and Guarantee Badges in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Trust Badge Strip works
A trust badge strip is a row of short promises, such as secure checkout, free delivery and easy returns, shown near a buy button or in the footer. Pick an icon, title and detail for each badge and copy the HTML and CSS, with the icons drawn as inline SVG.
Shoppers hesitate at the moment of paying, and a few plain facts about safety, delivery and returns answer the usual worries right where they arise. The strip works best with three to five badges that are true for every order.
How the trust badge strip is built
The badges are a list, so screen readers announce how many there are, and the list has a label describing the group. Each icon is a small inline SVG drawn with strokes in the current text colour, so it stays sharp at any size and picks up your icon colour with no image files. Icons are hidden from screen readers because the title says the same thing in words.
Layout
The strip is a CSS grid with auto-fit columns at least 12rem wide, so four badges sit in a row
on a desktop, drop to two by two on a tablet and stack on a phone with no media queries.
FAQ
Do trust badges actually help conversions?
Clear, specific promises near the checkout usually help because they answer real questions. Vague badges or logos that cannot be checked tend not to, so keep each one concrete and true.
Can I use payment or security company logos instead?
You can, but only with permission and following each company's brand rules. Many payment providers publish official badge files for this; add them as images with meaningful alt text.
Where should I put a trust badge strip?
Put it under the add to basket button on product pages, on the basket page and in the site footer. Those are the points where people decide whether to trust the shop with their money.
Can I add my own icons?
Yes. Replace the <path> inside any badge with the path from an open-licence icon set drawn on a
24 by 24 grid, and it will pick up the same size, stroke and colour as the others automatically.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Card Builder
Design a card component and copy its HTML and CSS.