Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create an Unordered List with Image Bullets in HTML?
An unordered list in HTML displays items without any numbering or ordering. It is created using the <ul> tag with individual list items defined using <li> tags. By default, unordered lists use simple bullet points, but we can customize these bullets to use images for a more visually appealing design.
HTML provides several built-in bullet styles for unordered lists −
-
disc − Creates solid circular bullets (default style)
-
circle − Creates hollow circular bullets
-
square − Creates solid square bullets
-
none − Removes all bullet markers
Beyond these standard options, we can use custom images as bullets using the list-style-image CSS property, which allows for creative and branded list designs.
Syntax
Following is the syntax to create an unordered list with image bullets in HTML −
<ul style="list-style-image: url('path/to/image.png')">
<li>Item in list...</li>
<li>Item in list...</li>
<li>Item in list...</li>
</ul>
The list-style-image property accepts a url() function that points to the image file. The image should ideally be small (16x16 to 24x24 pixels) for optimal appearance as a bullet point.
Using Inline CSS for Image Bullets
Example − Simple Image Bullets
Following example demonstrates creating an unordered list with custom image bullets using inline CSS −
<!DOCTYPE html>
<html>
<head>
<title>Image Bullets Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Team Members</h2>
<ul style="list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle cx="6" cy="6" r="5" fill="%234CAF50"/></svg>');">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
</ul>
</body>
</html>
The output displays a list with green circular image bullets −
Team Members ? Abdul ? Jason ? Yadav (with green circular bullets)
Example − Using External Image Files
Following example shows how to use external image files as list bullets −
<!DOCTYPE html>
<html>
<head>
<title>Custom Image Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<p>Popular programming tutorials available:</p>
<ul style="list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><polygon points="7,1 9,5 13,5 10,8 11,12 7,10 3,12 4,8 1,5 5,5" fill="%23FF6B35"/></svg>');">
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
</body>
</html>
The output shows a list with star-shaped image bullets −
Programming Languages Popular programming tutorials available: ? Java ? C++ ? Python ? JavaScript (with orange star bullets)
Using CSS Classes for Image Bullets
For better maintainability, it is recommended to define image bullet styles in CSS classes rather than inline styles.
Example − CSS Class Approach
<!DOCTYPE html>
<html>
<head>
<title>CSS Classes for Image Bullets</title>
<style>
.custom-bullets {
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect x="2" y="2" width="8" height="8" fill="%232196F3"/></svg>');
padding-left: 20px;
}
.arrow-bullets {
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><polygon points="2,6 6,2 6,4 10,4 10,8 6,8 6,10" fill="%23E91E63"/></svg>');
padding-left: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Features (Square Bullets)</h3>
<ul class="custom-bullets">
<li>Responsive Design</li>
<li>Cross-browser Support</li>
<li>Fast Loading</li>
</ul>
<h3>Steps (Arrow Bullets)</h3>
<ul class="arrow-bullets">
<li>Plan your project</li>
<li>Write the code</li>
<li>Test thoroughly</li>
</ul>
</body>
</html>
This example shows two different bullet styles applied to different lists −
Features (Square Bullets) ? Responsive Design ? Cross-browser Support ? Fast Loading Steps (Arrow Bullets) ? Plan your project ? Write the code ? Test thoroughly
Key Points for Image Bullets
-
Image Size − Use small images (12x12 to 20x20 pixels) for best results as bullet points.
-
File Format − PNG, SVG, GIF, and JPEG formats are supported. SVG is recommended for scalable graphics.
-
Inline SVG − You can embed SVG directly in the CSS using data URIs, eliminating external file dependencies.
-
Fallback − If the image fails to load, the browser falls back to the default disc bullet style.
-
Browser Support − The
list-style-imageproperty is supported in all modern browsers.
Browser Compatibility
The list-style-image property has excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge. It also works in Internet Explorer 4.0 and later versions.
Conclusion
Creating unordered lists with image bullets in HTML is achieved using the list-style-image CSS property with the url() function. This technique allows for creative customization of list appearance, making content more visually engaging. Use CSS classes for better maintainability when implementing image bullets across multiple lists.
9K+ Views
