导航与菜单类

这类图标主要用于网站的顶部、侧边栏或底部导航,引导用户在不同页面或功能间切换。

40个web网页常用png小图标
（图片来源网络，侵删）
序号 中文名称 英文名称 常见使用场景 设计要点
1 主页 Home 网站首页、返回主页的按钮。 最基础、最易识别的图标，通常放在导航栏最左端。
2 菜单 Menu 移动端或响应式网站的“汉堡包”菜单，展开显示导航项。 由三条横线组成，简洁明了，点击后通常会变成一个“X”图标。
3 返回 Back 在浏览器历史记录中返回上一页。 一个向左的箭头，常与文字“返回”结合使用。
4 前进 Forward 在浏览器历史记录中前进到下一页。 一个向右的箭头，是“返回”图标的反向操作。
5 刷新 Refresh 重新加载当前页面，获取最新数据。 一个圆形的箭头，顺时针或逆时针均可。
6 收藏夹 Favorites / Bookmark 收藏用户喜欢的网页或内容，方便日后访问。 一个飘带或五角星的形状。
7 用户 User 代表用户个人中心、账户或登录入口。 一个简化的、无性别的头部和肩膀轮廓。
8 设置 Settings 进入网站的设置或配置页面。 一个齿轮 ⚙️ 的形状，象征调整和配置。
9 搜索 Search 触发搜索功能，查找网站或互联网上的信息。 一个放大镜的形状，是最核心的交互图标之一。

内容与操作类

这类图标用于与页面内容进行交互，如创建、编辑、分享等。

序号 中文名称 英文名称 常见使用场景 设计要点
10 添加 Add / Plus ，如新建文章、添加好友、上传文件等。 一个“+”号，直观地表达了“增加”的概念。
11 编辑 Edit 修改已有的内容，如编辑文章资料、修改个人信息。 一支笔或铅笔的形状，有时会与一个“+”号结合。
12 删除 Delete / Trash 移除或删除不需要的内容。 一个垃圾桶的图标，警示用户此操作不可撤销。
13 上传 Upload 将本地文件发送到服务器。 一个向上的箭头，通常位于一个文件夹或平台的上方。
14 下载 Download 从服务器获取文件到本地。 一个向下的箭头，通常位于一个文件或图标的上方。
15 保存 Save 将当前操作或编辑的内容保存下来。 一个软盘的形状（虽然软盘已过时，但该图标已被广泛认知）。
16 分享 Share 分享到社交媒体、复制链接或发送给他人。 通常由多个带箭头的圆点或一个带分叉的盒子组成。
17 打印 Print 触发浏览器的打印功能，将页面内容输出到打印机。 一个打印机的简笔画图标。
18 邮件 Email 打开邮件客户端或发送邮件的功能入口。 一个信封的形状，有时上面会有一个向上的箭头表示“发送”。
19 链接 Link 复制当前页面的URL链接，用于分享。 两个相互连接的链环形状。
20 附件 Attachment 在邮件或表单中附加文件。 回形针的形状。
21 Tag 添加分类或关键词。 一个带有小旗子的标签形状。
22 日历 Calendar 查看或选择日期，常用于预订、事件安排。 一个方格里标有数字，代表日期。
23 时钟 Clock / Time 表示时间、时长或历史记录。 一个圆形的时钟表盘。

状态与反馈类

这类图标用于向用户传达信息，如成功、警告、错误等。

序号 中文名称 英文名称 常见使用场景 设计要点
24 成功 Success / Check 操作成功完成，如注册成功、保存成功。 一个绿色的对勾 ✓，通常出现在一个圆形背景中。
25 错误 Error / Cross 操作失败或出现错误，如密码错误、网络异常。 一个红色的叉号 ✗，通常出现在一个圆形背景中。
26 警告 Warning / Alert 提示用户注意潜在问题，如“确认删除？” 一个黄色的三角形，中间有一个感叹号 !。
27 信息 Information / Info 提供提示信息或说明，如“这是一条提示”。 一个蓝色的圆形，中间有一个小写字母 "i"。
28 加载中 Loading 表示系统正在处理请求，请稍候。 一个或多个旋转的圆圈，或一个沙漏。
29 帮助 Help / Question Mark 提供帮助文档或解答用户疑问。 一个问号 ?，通常放在一个圆形背景中。
30 空状态 Empty State 当列表或内容区域为空时，引导用户进行首次操作。 一个打开的空盒子或一个文件柜的图标。

多媒体与展示类

这类图标主要用于处理图片、视频和音频等多媒体内容。

序号 中文名称 英文名称 常见使用场景 设计要点
31 图片 Image / Photo 上传或查看图片的入口。 一张风景画或山脉的轮廓。
32 视频 Video 播放视频或上传视频的入口。 一个经典的胶片播放机或一个播放按钮。
33 播放 Play 开始播放音频或视频。 一个指向右边的三角形。
34 暂停 Pause 暂停正在播放的音频或视频。 两个竖条组成的图标。
35 音量 Volume 控制音频的开关或音量大小。 一个扬声器的形状，旁边可有声波线条表示音量大小。
36 全屏 Fullscreen 将视频或图片切换至全屏模式。 四个指向屏幕四角的箭头。

通用与社交类

这类图标代表一些通用的功能和主流的社交平台。

40个web网页常用png小图标
（图片来源网络，侵删）
序号 中文名称 英文名称 常见使用场景 设计要点
37 购物车 Shopping Cart 电商网站的核心功能，查看已选商品。 一个带手柄的购物车。
38 通知 Notification 显示系统消息、评论、点赞等提醒。 一个铃铛的形状，旁边有时会有一个红点表示未读数量。
39 点赞 Like / Heart 表示喜欢或赞许。 一个拇指向上 👍 或一个心形 ❤️。
40 评论 Comment / Chat 发表看法或进行讨论。 一个对话框或带有尾迹的对话框形状。

如何获取这些图标？

您可以通过以下途径免费获取高质量的PNG图标：

  1. 图标库网站:

    • Flaticon: 提供海量矢量图标，可下载为PNG、SVG等多种格式。
    • Iconfinder: 既有免费图标,也有付费的高质量图标库。
    • Material Icons (Google): Google官方设计的一套风格统一的图标,可直接在网页中使用或下载。
    • Font Awesome: 非常流行的图标字体库，可通过CSS直接使用,也可下载为图片。
    • The Noun Project: 专注于使用简单符号来表达概念的图标集合。

  2. 设计工具:

    • Figma, Sketch, Adobe XD: 这些现代UI设计工具都内置了强大的图标库,可以直接拖拽使用。

  3. UI套件:

    40个web网页常用png小图标
    （图片来源网络，侵删）
    • 许多设计师会分享包含完整图标、按钮、组件的UI套件，您可以在 Dribbble 或 Behance 上找到。

设计建议： 为了保证整个网站视觉风格的统一，请尽量选择同一套图标风格（如线性图标、面性图标、或特定设计语言风格的图标）使用,确保图标的尺寸和颜色与您网站的整体设计相协调。