If you want to customize the list in your HTML email and include an icon next to each list item, you should be careful to make it the same across all email clients.

Below, you can view an example HTML code optimized for HTML emails:

Here’s the HTML code with inline CSS:

<ul style="color:#6D6D6D; font-size:16px; font-family:Helvetica, Verdana, Arial, sans-serif; padding:0px; margin:0px; list-style-type:none;">
	<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #1</li>
	<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #2</li>
	<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #3</li>
	<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #4</li>
	<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #5</li>
</ul>

To view results in 30+ email clients, take a look at our PreviewMyEmail design test:

Lists with a custom list item image in HTML emails, email design preview