Glyph Play

Playful features and effects for lists for use in experimenting and generating new ideas for your project. Not recommended in production.

bullet-[symbol] extended options experimental

• list item 1
• list item 2
• list item 3

bullet-triangle-large or copy/paste this ▸ symbol.

• list item 1
• list item 2
• list item 3

bullet-triangle-open-large or copy/paste this ▹ symbol.

• list item 1
• list item 2
• list item 3

bullet-dot-open or copy/paste this ◦ symbol.

• list item 1
• list item 2
• list item 3

bullet-diamond or copy/paste this ◆ symbol.

• list item 1
• list item 2
• list item 3

bullet-diamond-open or copy/paste this ◇ symbol.

• list item 1
• list item 2
• list item 3

bullet-asterisk or copy/paste this * symbol.

• list item 1
• list item 2
• list item 3

bullet-asterisk-heavy or copy/paste this ✱ symbol.

• list item 1
• list item 2
• list item 3

bullet-asterisk-circle or copy/paste this ⊛ symbol.

• list item 1
• list item 2
• list item 3

bullet-star or copy/paste this ⭑ symbol.

• list item 1
• list item 2
• list item 3

bullet-star-open or copy/paste this ⭒ symbol.

• list item 1
• list item 2
• list item 3

bullet-star-circle or copy/paste this ⍟ symbol.

• list item 1
• list item 2
• list item 3

bullet-snowflake or copy/paste this ❄ symbol.

• list item 1
• list item 2
• list item 3

bullet-arrow-heavy or copy/paste this ➜ symbol.

• list item 1
• list item 2
• list item 3

bullet-check-heavy or copy/paste this ✔ symbol.

• list item 1
• list item 2
• list item 3

bullet-multiply or copy/paste this ✕ symbol.

• list item 1
• list item 2
• list item 3

bullet-multiply-heavy or copy/paste this ✖ symbol.

• list item 1
• list item 2
• list item 3

bullet-crossmark or copy/paste this ❌ symbol.

<ul class="evo-list-bullet bullet-check-heavy>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

This is a <ul> list with customized bullets, that extends the core set of symbols availabel in the list-bullet page. These bullets may not appear consistently across different browsers or devices, and may in fact look more cartoonish like emojis. Create a <ul> tag that contains <li> tags, and apply the list-bullet class. Add a style such as bullet-check-heavy class to the <ul> to change the symbol character.