feat(icons): added mail-dot icon

[elenakovelskikh]

What is the purpose of this pull request?

• New Icon

Description

Added new mail-dot icon.

Icon use case

Used to indicate that there is a new or unread message. Commonly used in messaging systems, inboxes, or notification areas to draw attention to recent activity.

Alternative icon designs

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any a brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious or political imagery.

Author, credits & license

• The icons are solely my own creation.
• The icons were originally created in # by @colebemis
• I've based them on the following Lucide icons: mail
• I've based them on the following design: monitor-dot bell-dot message-square-dot

Naming

• I've read and followed the naming conventions
• I've named icons by what they are rather than their use case.
• I've provided meta JSON files in icons/[iconName].json.

Design

• I've read and followed the icon design guidelines
• I've made sure that the icons look sharp on low DPI displays.
• I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• I've made sure that the icons are visually centered.
• I've correctly optimized all icons to three points of precision.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const MailDotIcon = createLucideIcon('MailDot', [
  ["path",{"d":"M12.674 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4.675"}],
  ["path",{"d":"m2 7 9 5.701a2 2 0 0 0 2 0l1.084-.686"}],
  ["circle",{"cx":"19","cy":"7","r":"3"}]
])

[karsa-mistmere]

Hi @elenakovelskikh,

This feels like a solid use case, but adding the dot to bottom right corner would feel more consistent with the rest of our mail icon variants, I think. 🤔

Open lucide studio

[elenakovelskikh]

Hi @elenakovelskikh,

This feels like a solid use case, but adding the dot to bottom right corner would feel more consistent with the rest of our mail icon variants, I think. 🤔

Hi @karsa-mistmere, thanks for the input! I see the reasoning behind aligning with the position of semantic icons like the exclamation mark or search, but in this case I think the notification dot follows a different logic. It's not a part of the icon's core meaning, but rather a status indicator — similar to what we see in most UI systems today. For clarity and consistency with common UX patterns, I believe top-right is the more intuitive placement for users.

I also aligned the design with existing icons in the set, like monitor-dot, ball-dot, and message-square-dot, all of which place the dot in the top-right position.

[karsa-mistmere]

I understand the reasoning, but I think in that case, the dot's placement should be in line with monitor-dot and message-square-dot:

Open lucide studio

[elenakovelskikh]

@karsa-mistmere, thank you for your feedback!

You're right — if we compare it with the two existing icons in the set, the dot could indeed be aligned with the top edge of the base object to stay consistent.

Before submitting the PR, I spent some time testing different placements. I still feel that slightly raising the dot — so it "sits" a bit outside the main shape — helps reinforce its role as a marker rather than a part of the icon itself. By letting it "stick out" a little, we enhance its visibility and clearly signal that it's a status indicator:

Please let me know what you think.

[jguddas]

I understand the reasoning, but I think in that case, the dot's placement should be in line with monitor-dot and message-square-dot:

Open lucide studio

With fixed bottom right corner:

Open lucide studio

[elenakovelskikh]

@karsa-mistmere @jguddas Thank you! I agree with your reasoning, and I’ve updated the SVG file accordingly.

[Dakkers]

I was just about to submit a request for this exact icon (same name and all) so it is definitely wanted 😎

[karsa-mistmere]

Hi @elenakovelskikh,

This feels like a solid use case, but adding the dot to bottom right corner would feel more consistent with the rest of our mail icon variants, I think. 🤔

[Open lucide studio](https://studio.lucide.dev/edit?value=%3Cpath+d=%22M12.29+20H4.002a2+2+0+0+1-2-2V6a2+2+0+0+1+2-2h16c1.104+0+2+1.121+2+2.226v5.449%22+/%3E%3Cpath+d=%22m22+7-8.991+5.727a2+2+0+0+1-2.009+0L2+7%22+/%3E%3Ccircle+cx=%2219%22+cy=%2218%22+r=%223%22+/%3E)

Again, while I do understand the reasoning as to why the dot should be in the top right corner, I do not necessarily agree with it and still firmly believe that this layout is simply much more legible and overall more consistent with the existing icon set.

[github-actions]

🤖 ChatGPT Tags suggestions ✨

I've asked ChatGPT for some suggestions for tags.

[github-actions]

Suggestions for the mail-dot icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

	"tags": [
	"tags": [
	"mail",
	"envelope",
	"communication",
	"post",
	"send",
	"address",
	"notification",

[karsa-mistmere]

Still voting for the bottom right corner.

Feels like consistent placement:

Also feels like consistent placement:

Does not:

[Levi-Bensley]

I was about to add this icon, but notice this pull request. Although initially I thought bottom right to pair with the other mail items, I think this has enough reason to be top right. Especially when UX is involved.

• Gmail, Outlook & Messenger all have mark as unread with a dot top right.
• Users have come to expect notification counters/dots in the top right.

Although all these icons are based on an envelope, I don't think many will be used with in close proximity of each other. mail and mail-dot are the most likely to be used, but I don't think theses consistency issues would be a problem in real world usage.

[karsa-mistmere]

I was about to add this icon, but notice this pull request. Although initially I thought bottom right to pair with the other mail items, I think this has enough reason to be top right. Especially when UX is involved.

• Gmail, Outlook & Messenger all have mark as unread with a dot top right.
• Users have come to expect notification counters/dots in the top right.

Although all these icons are based on an envelope, I don't think many will be used with in close proximity of each other. mail and mail-dot are the most likely to be used, but I don't think theses consistency issues would be a problem in real world usage.

I'm sorry, but this reasoning feels contradictory and doesn't hold up from a UX standpoint. It is exactly from a UX perspective that this icon doesn't make sense for the proposed use case to begin with: notification dots should not be part of the icons but a separate layer of UI, see our icon showcase for mail for instance:

Or more simplistically:

---

The apps apps being cited are actually a shining counterpoint to the argument made:

• Messenger? The dot is a separate UI element:
  

• Gmail? Separate UI element as well:

• Outlook? Again, separate UI element:
  

I think this icon could very well make sense to signify the action mark [e-mail] as [un]read, but in that case the whole argumentum ad UX or even Jakob's Law makes little sense regarding the placement of the dot.

[Levi-Bensley]

You make a fair point, and I agree it shouldn't be used for highlighting the presence of notifications.
Maybe user experience wasn't the right term, but I do feel the icon is typically seen in use cases for mark as unread, and would be what the user would expect to see as the icon (assuming no label is being used) for this action.

[karsa-mistmere]

You make a fair point, and I agree it shouldn't be used for highlighting the presence of notifications. Maybe user experience wasn't the right term, but I do feel the icon is typically seen in use cases for mark as unread, and would be what the user would expect to see as the icon (assuming no label is being used) for this action.

Using no label for such an action would be bad UX and lacking in a11y anyway.

[elenakovelskikh]

Hi all,

To display a specific number of unread messages, a counter (not a dot!) is usually used as a separate element near the mail icon to show the number of unread messages, and that’s true.

However, I designed this icon for cases where a counter will not be used—for example, in buttons like “Mark as unread”, “Show unread only”, and so on.

I’ve gathered a number of references where the icon for such use cases looks exactly like this.

For example, in Gmail and iCloud Mail, icons with a dot in the top-right corner are used for actions like “Mark as unread”.

Gmail:

ICloud:

In Iconify and Flaticon, searching for “mail unread” shows that almost all icons use the top-right corner for the dot.

Even when searching on Google for "mail unread icon", the majority of results show the icon with the dot in the top-right corner.

I also found two large icon sets (each including ~3K icons), Remix Icon and Fluent UI System Icons, where additional symbols in icons based on the mail icon are sometimes placed in the bottom-right corner and sometimes in the top-right corner. However, dots in these sets are still located in the top-right corner.

Remix Icon:

Fluent UI System Icons:

I think the examples from these two sets show that we don’t need to rigidly follow the position of additional symbols in new icons based on the same icon, but can be flexible and align with current common trends.

[jguddas]

It's the usual should we be internally consistent, or should we follow Jakobs law.

We haven't written it in stone but the usual decision has been to follow Jakobs law, in this case that would mean putting the dot in the top right corner.

https://lawsofux.com/jakobs-law