Simple Icon List Template
A clean, modern list that replaces default bullets with custom icons for enhanced visual appeal.
This template is perfect for feature lists, benefit rundowns, or any simple list where a visual cue is more effective than a standard bullet point.
About this Template
This component provides a foundational pattern for creating an icon list. It uses a standard unordered list (ul) and replaces the default bullet style with custom, inline SVG icons. The layout uses Flexbox to ensure the icon and its corresponding text are always perfectly aligned, regardless of how many lines the text wraps to. It is lightweight, accessible, and self-contained.
Features
- Semantic Structure: Uses a standard
ul, which is the correct semantic element for an unordered list. - Customizable Icons: The template uses inline SVGs for the icons, which can be easily styled with CSS or replaced with any other SVG.
- Perfect Alignment: Flexbox ensures robust alignment between the icon and multi-line text.
- Accessible by Design: The SVG icons are treated as decorative by using
aria-hidden="true", as the information is conveyed in the text itself. - Self-Contained Styles: All CSS is scoped to the
.simple-icon-list-templateclass to prevent conflicts with your existing styles.
Code Breakdown
The core of the component is an unordered list, ul, with a class of .icon-list. CSS is used to remove the default list styling, including list-style: none and any default browser padding.
Each list item, li, is a flex container with display: flex applied. This places the SVG icon and the text content side-by-side. The gap property provides consistent spacing between them. The SVG itself is given a fixed width and height to maintain a uniform size, and a class for easy styling.
Code
Here's the full code for the template: