Is there an HTML entity for an info icon?

Bonus: Styling your icon

Info icons can be further tailored using CSS. Here's a CSS snippet to serve as a starting point:

.info-icon::before {
  content: '\2139'; /* Choose your preferred Unicode character */
  color: #2a7ae4; /* Change to match your website color theme */
  font-weight: bold; /* Here is power 💪 */
  font-size: 1.5em; /* Bigger means better ✓ */
} /* Must... resist... adding... more... styles... */


Use it in HTML:

<p class="info-icon">More info...</p> <!-- Ta-da! Custom icon -->


Boosting user experience

Enhancing scalability and accessibility is a must. Favor icons like 🛈, which scale effortlessly. Remember to balance aesthetics with accessibility:

<p>
  <span class="icon" aria-label="Information">ℹ️</span> <!-- 'ℹ️'-ncredible! -->
  Some useful info.
</p>


Boost UX via tooltips:

.icon:hover::after {
  content: 'Hovering intensifies';
  /* Everything else as per your design */
}


For that extra flair, mix 'n match icons like ℹ️ and ☰.

Emojis: More than just cute

Enhance the visual appeal of your information cue using emojis. Combine Unicode and emojis for baseline alignment, ensuring a harmonious display.

Adding emojis to HTML:

<p>ℹ️ Smile more, worry less</p> <!-- Just some life advice 😉 -->


Tools like Unicode character finders (e.g., http://r12a.github.io/uniview/) aid in exploring visual languages for your site.

Craft it yourself

For when premade icons don't convey your website's unique charm, consider crafting your own SVGs or utilizing web font libraries such as Google Material Icons.

Creating custom SVGs using CSS:

.info-icon::before {
  content: url('custom-info-icon.svg'); /* Now that's what I'm talking SVG about */
}


Further explore HTML Arrows (https://www.toptal.com/designers/htmlarrows/symbols/information-source/) for a comprehensive list of symbols.