7777

 · 13 days ago

heroicon 草稿箱图标哪个适合?

Heroicons 里没有直接叫 “草稿箱 / Drafts” 的图标,但有几款非常适合作为“草稿”“未发布”“暂存”的图标。我给你 3 个最佳候选(实际开发里常用的对应关系):


最推荐:DocumentText

含义:文档 / 草稿 / 编辑中文档
Heroicons 名称:DocumentTextIcon

适用于:

  • 草稿箱
  • 文章草稿
  • 未发布的内容

图标语义最贴近“草稿”。


⭐ 次推荐:PencilSquare**

Heroicons 名称:PencilSquareIcon

适用于:

  • 编辑中的内容
  • 正在写的草稿

视觉效果更“可操作”,适合草稿箱入口。


⭐ 备用:InboxStack**

Heroicons 名称:InboxStackIcon

适用于:

  • 收集箱
  • 任务箱
  • 暂存内容

如果你的草稿箱更像“收件箱式的临时存储”,选它。


✨ 简洁结论

如果你做的是 博客文章草稿箱
👉 DocumentTextIcon 是最标准最经典的选择。

如果是 “正在写 / 编辑中” 的草稿:
👉 选 PencilSquareIcon

如果草稿箱更像“暂存池”:
👉 选 InboxStackIcon

如果你告诉我使用场景(文章系统?评论草稿?Web3 项目面板?),我可以帮你挑选最贴合的一个。


针对 社交网络草稿箱(类似 Twitter / X),最佳选择是:

PencilSquareIcon(最合适)

因为社交网络的草稿通常是 正在写但没发出去的内容,强调**“写作中、未完成”**,PencilSquare 正好表达:

  • 写作
  • 草稿
  • 编辑中
  • 暂未发布

这和 Twitter Drafts 的心智模型完全一致。

⭐ 次优选择:DocumentTextIcon

如果你的草稿更像“文章草稿”或“长内容草稿”才用它。对于社交内容,略显正式。

✨ 不建议用

  • Inbox / InboxStack:更像邮件、通知收件箱
  • ArchiveBox:更像归档,不是草稿

📌 最简建议

👉 社交网络草稿箱 = PencilSquareIcon(Heroicons)

你如果愿意,我还能帮你:

  • 选 outline / solid 版本
  • 给出实际 UI 展示(例如 Tailwind + Heroicons 的用法)
  • 推荐更 UX 友好的文案 / 布局