Skip to main content

input | output 图标设计

对于表达大模型(LLM)的输入(Input/Prompt)输出(Output/Response),使用 Lucide 图标(lucide.dev)时,推荐以下两组干净、一致且语义清晰的组合:

最推荐组合(强烈建议用这一组):

  • 输入(Input)text-cursor-input
    (一个带闪烁光标的输入框图标,非常直观地代表“用户输入提示词”或“文本输入”)

  • 输出(Output)message-square-textbot / sparkles
    最佳搭配是 message-square-text(带文本的消息气泡,代表模型生成的回复内容)
    或者用 bot(机器人头像,强调AI生成)
    或者 sparkles(星星闪烁,代表AI魔法/生成结果)

为什么这个组合好?
text-cursor-input 专为“输入”设计,视觉上像用户在打字;message-square-text 则完美对应模型的“输出文本”,左右对比非常清晰,方向感强(左输入 → 右输出)。

其他优秀备选组合:

  1. 文件/数据流风格(适合技术/节点式界面):

    • 输入:file-input
    • 输出:file-output
  2. 箭头/流程风格(强调数据流动):

    • 输入:import(或 arrow-right + text-cursor-input 组合)
    • 输出:export(或 arrow-right + message-square
  3. AI 专属风格(更现代、强调大模型):

    • 输入:text-cursor-inputterminal
    • 输出:bot + sparkles(或单独用 bot

建议使用方式(UI 设计小贴士):

  • 输入图标放左侧/上方,用蓝色调(用户侧)
  • 输出图标放右侧/下方,用紫色/绿色调(AI侧)
  • 可以加一个小箭头(arrow-right)连接两者,突出“输入 → 输出”的流程

你可以在 https://lucide.dev/icons/ 直接搜索这些名字预览效果。

如果你告诉我具体的使用场景(比如聊天界面、节点编辑器、参数面板等),我可以再帮你细化更精确的推荐!需要我帮你列出更多类似图标吗?