200+ 个你现在必须知道的设计资源！
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
在线设计工具
各种在线设计工具，从照片编辑器到线框图绘制工具等等。
| 网站 | 描述 |
|---|---|
| Figma | 在线图形设计工具（免费和付费选项） |
| 向量 | 免费矢量图形软件 |
| 塔勒 | 利用数百个可自定义模板，几分钟内即可创建社交媒体横幅设计。 |
| Canva | 创建精美设计（免费和付费） |
| 获得波浪 | 一款免费的 SVG 波浪生成器，可用于创建独特的 SVG 波浪，适用于网页设计。 |
| 回形针 | 简易 CSS 剪切路径生成器 |
| 精美边框半径 | CSS 中指定边框半径的八个值（边框半径生成器） |
| 线框.cc | 线框图工具（免费和付费） |
| 照片 | 照片编辑器和设计制作器 |
| Pixlr | 在线照片编辑器 |
| 维德 | 用最简单的方式在线制作视频。价格低廉且功能齐全的编辑器。 |
| 移除背景 | 移除图片背景 |
| 照片创建器 | 与其搜索素材照片，不如自己拍摄照片。 |
| 维斯梅 | 创建演示文稿、信息图表等 |
| 信息图表 | 创建信息图 |
| ChartGo | 在线创建图表 |
| 卡通照片 | 将照片转换成卡通 |
| 异想天开 | 线框图、图表等（4 个免费） |
| 白板 | 在线绘图工具 |
| 章鱼 | 网站地图生成器 |
| CTA按钮制作工具 | 创建行动号召按钮 |
| 斑点制造器 | Blobmaker 是一款免费的生成式设计工具，可帮助您快速创建随机、独特且外观自然的 SVG 形状。 |
| 人物角色 | 一款适合现代的趣味头像生成器 |
| SoftUI | 一个软UI（拟物化）CSS生成器 |
| Photopea | 在线 Photoshop 编辑器 |
| Excalidraw | 用于绘制类似手绘图表的虚拟白板 |
| 图表 | 图表软件和流程图制作工具 |
| 映射时间（秒） | 用地图轻松可视化数据 |
| 网格马尔文 | 创建 CSS 网格时可参考的 CSS 网格速查表 |
| Flex Malven | Flexbox 网格速查表，供您在使用 Flexbox 时参考 |
| 智能升频器 | 图像放大 2-4 倍 |
| 获取头像 | 由 Fang-Pen Lin 使用 Pablo Stanley 草图库制作的趣味多彩免费头像网页生成器工具 |
| 大头 | 使用 Robert Broersma 开发的 Big Heads，轻松为您的项目生成头像。 |
| Webflow | 打破代码壁垒，无需编写代码，即可更快地构建更优质的企业网站。 |
| 痕迹 | 立即去除照片背景 |
| 拟态主义.io | 生成 Soft-UI CSS 影子代码 |
| 数据库设计器 | 在线免费设计您的数据库 |
| Ui 面包店 | 以可视化方式创建功能齐全的 Web 应用程序 |
| 假 | 将真实代码转换为伪代码 |
| 里夫 | 实时交互式设计工具，可让您设计、制作动画，并将您的素材立即集成到任何平台中。 |
| 取消屏幕 | 100% 自动免费去除视频背景 |
| Kodeshot | 将你的源代码转换成精美的图片，用于你的文章、推文、消息、帖子…… |
| Wix | 打造一个让你引以为傲的网站 |
| GTmetrix | 网站速度和性能优化 |
| 框架 | 是团队原型设计工具 |
| Draw.io | 免费在线图表编辑器工具 |
| UXWing SVG 编辑器 | 在线创建和编辑 SVG |
| CSS箭头 | 创建并导出自定义框的 CSS 代码，该自定义框侧面带有向外延伸的箭头。非常适合用于工具提示、弹出窗口等。 |
| Lucidchart | 图表绘制和可视化工具，可用于创建数据库、流程图、看板、平面图等等。免费套餐包含 3 个多页文档。 |
| 碳 | 通过输入或拖放文件，创建并分享精美的源代码图像。 |
| PixCleaner | 精准便捷的背景移除工具 |
| Glass UI | 一个基于玻璃形态设计原则的现代 CSS UI 库，可帮助您快速设计和构建美观的网站和应用程序。 |
| 玻璃态 | 一款功能强大的在线工具，可用于快速生成 CSS 代码片段中的玻璃变形 UI。 |
| 表格转换 | Table Convert Online 是一款基于网络的工具，可将 Excel、URL、HTML、Markdown 表格和 CSV 文件转换为 Markdown 表格、CSV/TSV、JSON、XML、YAML、插入 SQL、HTML、Excel 和 LaTeX 表格。 |
可下载的设计软件
免费软件，适用于用户界面、照片、3D建模等。
| 网站 | 描述 |
|---|---|
| GIMP | 类似 Photoshop 的免费开源图像编辑器 |
| Gravit Designer | 一款免费且功能齐全的矢量图形设计应用程序，可在所有平台上运行。 |
| 混合器 | 开源、免费动画、3D建模等。 |
| 生食疗法 | 跨平台原始图像处理程序 |
| 放克 | 在线设计程序 |
| Krita | 专为数字艺术家设计的素描和绘画程序 |
| 铅笔项目 | GUI原型设计软件 |
| Inkscape | 功能强大的免费设计工具 |
| Adobe XD | Adobe提供的免费设计工具 |
| 形状.so | 可以在项目中用作代码的图标 |
| 疯癫 | Sketch for Windows |
| InVision Studio | InVision提供的免费屏幕设计工具 |
| Darktable | 免费开源的摄影工作流程应用程序和RAW编辑器 |
| Inpixio 照片编辑器 | 免费照片编辑器：仅限 Windows 系统 |
| 颜色选择器 | 开源色彩软件：轻松检索、操作和存储您的颜色！ |
设计灵感
以下是一些可以从中获得设计和用户界面灵感的网站。
| 网站 | 描述 |
|---|---|
| Behance | 不同创作者的设计项目 |
| Dribbble | 不同创作者的设计项目 |
| 着陆页 | Landingfolio 汇集了网络上最好的落地页灵感、模板、资源和示例。 |
| Codewell | 在真实设计模板上练习您的 HTML、CSS 和 Javascript 技能 |
| Foxyapps | 从最佳移动应用设计中汲取设计灵感 |
| Httpster | 展示来自世界各地人们制作的网站 |
| 灵感 | 来自设计师和设计界的最新设计作品 |
| 设计说明 | 面向产品设计师的免费在线资源库 |
| 土地簿 | 展示大量网站，帮助您寻找灵感 |
| 前端导师 | 使用 HTML、CSS 和 Javascript 解决现实世界中的 UI 挑战 |
| Awwwards | 一个对全球最佳用户界面网站进行评级和收集的网站。 |
| Codrops | 一个收集最佳用户界面设计理念和模式并制作相关教程的网站。 |
| SaaS落地页 | 探索顶级 SaaS 公司创建的最佳着陆页示例 |
| Saaspages.xyz | 精选最佳落地页，重点关注文案撰写和设计。 |
| 屏幕通道 | Screenlane 是一个网站和新闻简报，提供最新的网页和移动设计灵感。 |
| 拉帕忍者 | 最佳着陆页灵感 |
| 自由前端 | 免费前端设计，基于 CSS、HTML 和 JavaScript。最新作品的部分设计。 |
| Webframe | 探索并欣赏精美的网页应用设计，从中汲取灵感。 |
| 收集用户界面 | 每日灵感源自每日UI设计案例及其他来源。精选并每日更新。 |
| 图形汉堡 | 该网站提供免费和付费的图标、模型、UI工具包、文字特效和背景。网站资源包含免费和付费资源。图标格式包括PNG、SVG、EPS和Sketch。部分资源可能令人困惑，因为免费资源包中穿插了赞助内容。 |
| 非常好的电子邮件 | 一个为用户提供大量公司电子邮件的网站，涵盖客户服务到市场营销等各个方面。 |
| 免费设计资源 | 一个提供字体、模型、模板、图形和用户界面工具包的网站。 |
| 网站灵感 | siteInspire 展示了最优秀的网页和交互设计。 |
| 网页设计灵感 | 一个每日更新的网页设计灵感网站。 |
| 导航导航 | 响应式导航示例 |
| 卡氏菌 | 收集各种不同的网页组件，供您参考。 |
| MediaQueri.es | 一系列运用媒体查询和响应式网页设计的励志网站 |
| Mulzli 搜索 | 设计灵感搜索引擎 |
| DeviantArt | 获取3.7亿件艺术作品的灵感。 |
| 设计你的方式 | 各种网页和移动应用设计作品集 |
| 人类.fyi | 一系列精美的个人网站，可按颜色和网站使用的网络技术进行筛选。 |
| SiteSee | 精选的精美现代网站图库。 |
| UI车库 | 每日精选用户界面设计灵感和模式。 |
| 电子商务设计 | 电子商务网站设计作品集及技术灵感。 |
| 设计提名 | 一个表彰和展示最佳网站、应用程序和游戏的平台。 |
| 设计库 | 一个包含来自真实世界数字产品的屏幕截图和图案的库 |
| CSS按钮 | 84 个精美的 CSS 按钮示例。 |
| CSS box-shadow | 91 个漂亮的 CSS 阴影效果示例。 |
设计系统与风格指南
设计系统、风格指南、工具包、文档。其中一些是顶级公司/网站的设计指南。
| 网站 | 描述 |
|---|---|
| 材料设计 | 谷歌的 Material Design |
| 蚂蚁设计 | 企业级产品设计系统 |
| 苹果设计资源 | 使用 Apple 设计和 UI 的指南和模板 |
| 底漆 | 使用 GitHub 的设计系统进行设计、构建和创建。 |
| Alta UI | Oracle 的设计系统和工具包 |
| 脉冲 | 设计系统、指南和 React 组件库 |
| 螺栓 | 基于 Twig 和 Web 组件的强大 UI 组件 |
| 清晰设计系统 | 用户体验指南、HTML/CSS框架和Angular组件 |
| AtlasKit | Atlassian 官方 UI 库，根据 Atlassian 设计指南构建。 |
| 奥迪设计资源 | 奥迪用户界面设计系统和工具包 |
| 碳纤维设计系统 | Carbon 是 IBM 面向产品和体验的开源设计系统。 |
| Yelp风格指南 | Yelp 风格指南、组件和工具包 |
| 彗星 | 可扩展的设计系统，包含视觉语言、组件和设计资源 |
| 电子交易设计系统 | 将金融知识与简洁易用性相结合的指南和工具包 |
| 基础库 | 开源且社区驱动的项目，旨在实现一致的用户界面 |
| 信息设计 | 为 Infor 产品创造有意义的用户体验的指南和资源 |
| 词典 | 一种用于打造精美用户界面的体验语言 |
| Mailchimp 用户界面/用户体验 | Mailchimp 的样式指南和组件 |
| 漫威风格指南 | 设计原则和组件集 |
| Microsoft Fluent UI | 微软出品的 UX 框架集合 |
| Pluralsight 设计系统 | 使用 Pluralsight 进行设计的组件设计指南 |
| 北极星 | 为所有 Shopify 商家创造卓越体验的设计系统 |
| Mozilla协议 | Protocol 是 Mozilla 和 Firefox 网站的设计系统。 |
| SendGrid 样式指南 | SendGrid 的 UI 库，用于开发一致的 UI/UX。 |
| VTEX 风格指南 | VTEX 中与产品设计相关的可重用模式、组件和资源 |
| 里佐 | 包含 UI 组件、JS 组件、小部件等的样式指南 |
| 原子化 | UI框架，帮助开发人员与设计师协作，轻松构建一致的用户界面。 |
| StyleGuides.io | 包含 500 多个风格指南的目录 |
| 完成设计系统 | 开源设计系统、指南和组件 |
| 斯柯达品牌系统 | 斯柯达品牌应用程序开发设计指南 |
| 光谱 | Adobe 的设计系统提供组件和工具，帮助产品团队更高效地工作，并使 Adobe 的应用程序更具凝聚力。 |
| 沥青 | Gojek 的设计语言系统。一套旨在打造卓越用户体验的指导原则和组件。 |
| 用户体验法则 | 设计师在构建用户界面时必须考虑的关键原则集合。 |
| 清单设计 | Checklist Design 是一份精心整理的清单列表，涵盖从网站页面到 UI 组件，再到品牌资产等各个方面。 |
| 人道设计 | 一个通过以用户福祉为中心的模式，为设计符合伦理道德的人性化数字产品提供指导的资源。 |
| Pr1mer 指南 | 一套开源的通用指南，灵感源自人机交互。由 Pr1mer Tech 创建和维护。 |
图像压缩
可以压缩大图片的网站
| 网站 | 描述 |
|---|---|
| TinyPNG | 智能PNG和JPEG压缩 |
| Optimizilla | 在线 JPEG 和 PNG 优化器/压缩器，带设置和压缩包下载功能 |
| Compressor.io | JPEG、PNG、GIF、SVG 压缩 |
| Squoosh.app | 来自 Google Chrome Labs 的图像压缩 |
| 批量调整照片大小 | 批量调整图像大小、压缩和转换，所有操作均在浏览器内完成（可离线使用） |
| iLoveIMG | 速度最快的免费网页应用，可轻松修改图像 |
| SvgOMG | 在线 SVG 优化器，提供多种设置选项，并可直接剪切粘贴 SVG 代码。 |
| CompressJPEG | 压缩大于 5MB 的 JPEG 图片 |
| CompressNow | JPEG、GIF、PNG 压缩 |
| 宣传图片调整器 | 免费图像和照片尺寸调整器 |
| 图像优化器 | 免费图像优化器，提供多种质量选项 |
| SVG 压缩 | 此工具可移除冗余信息，从而减小 SVG 文件的大小。 |
| JPEG优化器 | 免费在线工具，用于调整和压缩数码照片和图像的大小，以便在网络上显示。 |
| 调整大小应用程序 | 在线调整图片大小 |
| EZGif | 动画 GIF 制作器和图像编辑器，包含图像优化功能，并支持 WebP 转换。 |
| 在线PNG工具 | 调整 PNG 图像大小而不丢失透明背景。 |
| 维雷克西夫 | 移除图片中的元标签，以减小图片大小并提高隐私安全性。 |
| Vecta Nano | 使用无损压缩技术，通过移除不必要的数据来压缩低效的 SVG 代码。（免费和付费版本） |
HTML 和 CSS 模板
提供免费精美网站模板和各种类型主题的网站
| 网站 | 描述 |
|---|---|
| HTML5Up | 非常现代、独特的响应式 HTML5/CSS3 主题 |
| Templatemo | 极简主义、简历、画廊主题等等 |
| Templated.co | 大量极简主义的 HTML5/CSS3 主题 |
| FreeHTML5 | 免费和付费的 HTML5 和 Bootstrap 主题 |
| StyleShout | 精美设计的免费网站模板 |
| 启动引导程序 | Bootstrap 入门主题 |
| 零主题 | HTML5、Bootstrap、Prestashop 模板 |
| HTML5xCSS3 | 不同类别的精美模板合集 |
| Colorlib | 几乎任何你能想到的主题类别 |
| 免费 CSS | 海量免费模板 |
| HubSpot | 模板、信息图、横幅广告等等 |
| 移动 | 精美的 HTML5/CSS3 模板 |
| Bootswatch | Bootstrap 的免费主题 |
| Onepagelove | 单页网站、模板和资源 |
| 应用主题 | 免费 Bootstrap 主题和着陆页 |
| BootstrapTaste | 高级和免费 Bootstrap 模板 |
| Bootstrap制造 | 使用 Bootstrap 构建的优雅、简洁、美观的免费模板。 |
| W3Layouts | W3Layouts：2020 年 3784+ 个免费网站模板 |
| 工具板 | Tooplate：人人都能用的免费HTML模板！ |
| 克鲁普 | 提供完整的HTML模板，帮助您轻松构建初创公司着陆页，无需任何麻烦。 |
| UIdeck | 免费落地页模板和Bootstrap主题 |
| 斯普拉尔 | 免费网页模板，助您开启创意之旅！ |
| W3css模板 | 这里有一些响应式 W3.CSS 网站模板供您使用。 |
| 全部免费下载 | 下载免费网站模板 |
| 混搭模板 | HTML5/CSS3 免费模板 |
产品和图像模型
创建设备和其他产品的模型
| 网站 | 描述 |
|---|---|
| 智能模型 | 创建精美的产品模型（免费和付费） |
| 媒体修改器 | 为您的产品提供精美的设计模型服务（免费和付费版本） |
| 快照 | 为您的应用或网站设计创建精美的设备模型图像 |
| 斯克里利 | 立即将屏幕截图转换为模型 |
| 清扫射击 | 根据网址生成任何网站的屏幕截图。 |
| 屏幕峰 | 根据 URL 创建模型 |
| 模型世界 | 最大的免费逼真模型在线资源库 |
| 合作拍摄 | 实时屏幕截图和图像共享 |
| Facebook 设备 | 常用设备的图片和草图文件 |
| Threed.io | 直接在浏览器中生成 3D 模型。 |
| 模拟电话 | 100% 免费提供所有设备的模型，包括 iOS、Android、Windows Phone、笔记本电脑、台式机和电视。 |
| 设备截图 | 免费创建用于社交媒体的高分辨率设备模型。 |
| 清洁模拟 | 使用 iPhone X 等最新设备边框和自定义背景，直接在浏览器中快速免费地创建令人惊艳的模型，让您的手机或网站设计脱颖而出。 |
| 模拟视频 | 通过在视频中添加设备边框，即可立即创建模型。 |
| MockupBro | 使用在线模型生成器创建产品模型！只需选择一个模型，上传您的设计，即可下载无水印图像。 |
| 动画模型 | 在浏览器中创建动画模型。 |
矢量图和剪贴画
免费矢量图、剪贴画、插图、图案等等
| 网站 | 描述 |
|---|---|
| Vecteezy | 查找并下载免费矢量图 |
| Freepik | 免费矢量图、图片素材、PSD 文件和图标 |
| 免费矢量图 | 一个分享免费矢量图形的矢量爱好者社区 |
| PNG树 | png、背景、模板、文字效果 |
| Vector4Free | 免费矢量图形 |
| 复古矢量图 | 复古矢量图和图形 |
| 免费 | 矢量图、图案、模型等等 |
| 卢卡萨达姆 | 免费矢量图 |
| 插图 | 精美100幅插图 - png、svg格式 |
| 剪贴画 | 从免费图库中选择精美的剪贴画、png图片、涂色页、图画等素材，用于您的项目！ |
| Growwwwkit 插图 | 一套8幅简洁、黑白、时尚的插图 |
| trianglify.io | 生成低多边形背景、纹理和矢量图 |
| 斑点 | 为 Web 和 Flutter 应用生成 Blob 形状 |
| HiClipart | 一个供设计师分享和下载透明背景PNG剪贴画的社区 |
| Freepik 的故事 | 一系列免费且可定制的项目插图 |
| 黑色插图 | 美丽的黑人插画（免费和付费） |
| 设计 | 一系列免费插图及其他内容 |
| 定制形状分隔器 | 免费工具，让设计师和开发者更容易导出漂亮的 SVG 形状分割线 |
| 施维雅医疗艺术 | 3000张免费医学图片，可用于您的出版物和PPT演示文稿。 |
| Clker | 免费剪贴画，你可以随意使用 |
| SVG 波 | 一款免费且可自定义的渐变🌈 SVG 波浪生成器，适用于 UI 设计。 |
| 遗产图书馆 | 复古插画（矢量图和png格式） |
| 机器人哈希 | 从任何文本生成独特的图像 |
| 虎斑猫 | 创建和自定义最少生成的图案/艺术作品，用于背景图像、印刷品和其他项目。 |
| 海庆 | 一款超棒的多形状网页应用。 |
用户界面图形
提供各种格式（例如 PSD、Sketch、Figma 等）的现代 UI 组件的网站和资源。它们非常适合为 Web 组件/UI 设计寻找灵感。
| 网站 | 描述 |
|---|---|
| UI设计日报 | 各种类型的优秀 UI 组件 |
| 每日100个用户界面 | 免费 Figma 产品、元素和屏幕库 |
| Sketch App Sources | Sketch UI、线框图、图标等等 |
| 人类 | 很酷的插图，描绘了能够自由组合的人物 |
| 图案 | 免费提供各种矢量格式的精美图案。 |
| 模式库 | 免费精美背景图案 |
| 404 插图 | 免费插图，共 404 页 |
| Drawkit.io | 为设计师和初创公司提供的插画 |
| 荒谬的设计 | 为设计师和开发人员提供的免费超现实主义插图 |
| Undraw.co | 开源插图，满足您任何想象和创作需求。 |
| Manypixels.co | 单色、等距高质量插图 |
| 开放的人群 | 手绘插图库 |
| 用户界面空间 | 数千款优质免费 UI 素材 |
| Animations.co | 精美、可自定义的动画 GIF 图标 |
| Uplabs | 高质量设计资源（免费和付费） |
| InvisionApp | 免费、高质量的 UI 工具包、图标包和模型库 |
| 打开涂鸦 | 一套免费的素描插画 |
| 化身 | Pablo Stanley 的免费头像插画素描库 |
| 免费草图 | 免费提供 Sketch 设计、线框图、插图等。 |
| 脸红 | 使用 Figma 插件获取免费可自定义插图 |
| 英雄图案 | 一组可重复使用的SVG背景图案 |
| 等平面 | 一套免费的等距SVG图形资源 |
| IRA 设计 | 由创意 tim 创作的开源渐变插图合集。 |
| 透明纹理 | 一系列透明纹理背景图案。 |
| Storytale.io | Storytale免费优质插图子集 |
| icons8.com/illustrations | 免费矢量插图，提升您的项目档次 |
| 帕蒂尼科 | 无缝图案制作器 |
| 免费插图 | 免费背景图片，打造精美落地页 |
| Pixeltrue 插图 | 免费动画插图 |
| 抽象用户头像 API | 提供API，可根据用户名或邮箱创建简单而灵活的用户头像 |
| 素描谷 | 下载免费的PNG、SVG或AI文件。 |
| 图案纸 | 免费且无限制的独特图案设计。 |
| 方面 | Dimensions.com 是一个持续更新的参考数据库，收录了各种尺寸标注图，记录了日常物品和空间的标准尺寸和规格。 |
| Freebiesbug | 为网页设计师和开发者精心挑选的资源，持续更新。 |
| 灵活 | 每天一张全新的高质量开源插图。 |
| 酷文本 | Cool Text 是一款免费的图形生成器，适用于网页以及任何其他需要精美徽标而无需大量设计工作的地方。 |
| 插图工具包 | 每日新增优质开源插图 |
| 小玩意图案生成器 | 创建独特、无缝、免版税的图案。 |
| 图案怪兽 | 一个简单的在线图案生成器，用于创建可重复的SVG图案 |
| 范例 | 适用于 Figma 和 Sketch 的免费头像库 |
字体
提供免费字体以及基于字体的工具的网站
| 网站 | 描述 |
|---|---|
| Google字体 | 包含约 1000 种免费授权字体的字体库 |
| DaFont | 免费字体库 |
| 使用与修改 | 个人精选的精美、优雅、朋克、专业、不完整、怪异的字体 |
| 1001种免费字体 | 我觉得名字已经说明一切了😏 |
| 字体松鼠 | Font Squirrel 在互联网上搜寻高质量、真正免费的字体。 |
| 字体结构 | 一家数字字体设计公司，为各种品牌打造零售字体和定制字体。 |
| 蒂芙 | 一款能够直观对比两种字体差异的字体比较工具 |
| TypeKit 实践 | 了解排版实践 |
| 丰乔伊 | 一键生成字体配对 |
| 黄金比例 | 黄金比例排版计算器 |
| FontSpark | 发现更优质的字体 |
| FontGet | 提供多种字体供下载，并按标签整齐分类。 |
| 字体对 | 帮助您将 Google 字体搭配使用 |
| 字体空间 | 一个以设计师为中心的免费字体网站，提供快速可自定义的预览功能。 |
| 抽象字体 | 免费字体，可供个人和商业用途 |
| 免费排版 | 高质量字体列表 |
| Leon Sans | 一种用代码创建的几何无衬线字体。 |
| 莱克森德 | 经实证研究表明，可变字体能显著提高阅读效率 |
| 适用于苹果平台的字体 | 获取在应用程序中使用 Apple 平台系统字体所需的详细信息、框架和工具。 |
| SFWin | 适用于 Windows 10 和非 Apple 平台的旧金山字体 |
| 字体翻转器 | 无需下载字体，即可在您自己的设计上预览 800 多种 Google 字体。 |
| 字体竞技场 | 免费精选字体 |
| 字体 | 免费高品质字体 |
| 阿拉伯字体 | 免费阿拉伯语字体 |
| 字体掉落 | 查看字体文件内容的简单便捷方法 |
| 开放式铸造厂 | 免费平台，提供精选开源字体 |
| 字形 | 上传您自己的 SVG 文件并将其转换为字体文件。如果您想要加载较小的字体库，这将非常有用。 |
| Google Webfonts Helper | 轻松实现 Google Fonts 自托管 |
| 粗糙的 Font Awesome | 当 RoughJS 遇上 Font Awesome |
| 字体 | 免费时尚字体 |
| 马拉雅拉姆语字体 | 由 Swathantharma Malayalam Computing (SMC) 维护的免费马拉雅拉姆语字体 |
| 开发字体 | 免费查找和使用编码字体 |
颜色
有助于颜色选择的网站和资源
| 网站 | 描述 |
|---|---|
| Color Brewer 2 | 原汁原味的调色板生成器，也支持色盲用户。可能是科学上最佳的选择。但可能不是最漂亮的。 |
| Colormind.io | 颜色调色板生成器 |
| ColorCurves.app | 使用曲线生成调色板的颜色调色板生成器 |
| 颜色渐变 | 一款免费工具，可用于直观地创建简单和复杂的 CSS 渐变。 |
| 冷却器 | 创建完美的调色板，或从数千种美丽的配色方案中汲取灵感。 |
| HTML颜色代码 | 使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值 |
| 颜色和字体 | 精选的颜色、字体和资源库 |
| 调色板列表 | 选择你喜欢的两种颜色，该工具会为你生成数千种配色方案。 |
| 调色板 | 从单一颜色创建调色板 |
| Google Material Color Tool | 官方 Google Material Color Palette 工具 |
| 材质调色板 | 您可以自由选择 Material Design 的调色板、图标和颜色。 |
| 色彩空间 | 从一种颜色生成漂亮的调色板 |
| FlatUIColors | 一系列色彩缤纷、风格各异的精美调色板 |
| Adobe Color | 创建调色板、从图像中提取渐变等。 |
| 色彩灵感 | 一站式色彩资源，助您找到所有关于色彩的信息 |
| ColorsWall | 用于存储调色板并一键生成调色板的地方 |
| 快乐色调 | Happy Hues 是一个色彩灵感网站，由 Mackenzie Child 创建，它通过真实案例展示了如何在设计项目中运用色彩。 |
| Adobe趋势 | 在 Behance 和 Adobe Stock 的创意社区中，探索不同行业的最新色彩趋势。 |
| 色彩寻宝游戏 | 一个免费开放的色彩灵感平台，拥有数千种精心挑选的潮流配色方案。 |
| 梯度搜索 | 一个免费开放的渐变灵感平台，拥有数千种精心挑选的时尚渐变色。 |
| 网页渐变 | 一个可以找到优秀 CSS 渐变效果的免费网站 |
| ColorBox | 一个可以生成颜色集的免费网站 |
| CSS渐变 | 一个可以制作自定义渐变的免费网站，以及一些渐变示例 |
| 梯度a | 纯CSS和JPG渐变 |
| UI渐变 | UI渐变颜色生成器 |
| 调色板生成器 | 每次按下空格键都会生成新的调色板 |
| 材质调色板 | 1000+ 种 Material Design 调色板 |
| 抓取环境 | 渐变选择器 |
| ShadeSwash | 快速生成任意颜色的色调 |
| 品牌颜色 | 最全的官方品牌颜色代码库 |
| 品牌调色板 | 标志颜色代码和调色板 |
| Material Design 调色板生成器 | 生成类似 Material Design 的主题和调色板 |
| 彩色 | 一款面向设计师和开发者的配色方案工具。它能帮助您汲取灵感，并为您的配色工作提供参考。 |
| 0到255 | 一款可以轻松调亮和调暗颜色的颜色工具。它非常适合用于悬停状态、边框、渐变等效果。 |
| 颜色混合器 | 一个显示两种颜色中间点颜色的工具 |
| 渐变按钮 | 可直接复制/粘贴的渐变按钮 |
| 克罗玛 | Khroma 利用人工智能学习你喜欢的颜色，并创建无限的调色板供你发现、搜索和保存。 |
| 谁可以使用 | 一款旨在帮助人们了解颜色对比度如何影响不同视力障碍人士的工具。 |
| 可着色 | 颜色组合对比度测试仪 |
| 颜色十六进制选择器 | 获取颜色名称及十六进制代码的工具。 |
| 猿若君 | 令人惊艳的网站和应用程序设计配色方案，附带预览图 |
| 帕莱顿 | Paletton.com 是一款设计师配色工具，旨在创建搭配和谐的色彩组合。 |
| Colorzilla | 一款功能强大的在线类 Photoshop CSS 渐变编辑器 |
| 图像颜色选择器 | 图像颜色选择器和调色板生成器 |
| 组合颜色 | 颜色混合工具 |
| 色彩爱好者 | 它将展示外界流行的配色方案。 |
| HTML CSS 颜色 | 免费在线颜色（美国）或颜色（英国）工具：信息、渐变生成器、色轮等。 |
| 十六进制颜色代码 | 它通过我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值。 |
| CoolHue 2.0 | 一款免费工具，可显示 CSS 和 PNG 格式的不同渐变示例。 |
| 颜色。哈哈 | 由 Twitter 机器人生成的有趣调色板，每种颜色都有十六进制代码和描述性名称。 |
| 颜色。 | 超快速且简单的调色板生成器，调色板可在几秒钟内保存和共享。 |
| UI颜色选择器 | 一系列带有十六进制代码的用户界面颜色，只需单击一下即可复制。 |
| 颜色十六进制 | 颜色十六进制表示法提供有关颜色的信息，包括颜色模型（RGB、HSL、HSV 和 CMYK），并为所选颜色生成简单的 CSS 代码。 |
| 法布维洛 | 随机调色板生成器 |
| 阳台颜色 | 浏览其他设计师制作的调色板，生成并提交您自己的调色板。 |
| 二人组 | Duo 是我从个人项目中挑选或在网上看到的一系列色彩组合。 |
| Lospec 调色板列表 | Lospec调色板列表是一个像素艺术调色板数据库。 |
图标
图标资源，包括 png、svg 等格式
| 网站 | 描述 |
|---|---|
| UXWing | 经过优化的免费图标，可用于商业用途 |
| Shapedfonts Iconclub | 8000 多个免费图标 |
| 羽毛图标 | 美观、可定制的开源图标 |
| 表格图标 | 470 多个高度可定制的开源 SVG 图标 |
| 希康斯 | 集成了来自 fluentui-system-icons、ionicons 等的 SVG Vue/React 组件（Vue3、Vue2、React、SVG）。 |
| 图标 | 免费图库，包含 900 多个开源图标 |
| 简易图标 | 1307 个适用于热门品牌的免费 SVG 图标 |
| 线性图标 | 1000 多个超清晰矢量图标 |
| 图标8 | 免费图标、照片、矢量图和工具 |
| 扁平图标 | 最大的免费图标数据库，支持 PNG、SVG、EPS、PSD 和 BASE 64 格式。 |
| 名词项目 | 超过 200 万个精选图标，由全球社区创作 |
| Iconscout | 免费下载图标插图素材图片，尽在一处 |
| IconSearch.ch | 搜索引擎已索引超过 50,000 个 SVG 图标 |
| Nucleo 应用 | Nucleo 是一个拥有 27500 个精美图标的图标库，也是一款功能强大的应用程序，可用于收集、自定义和导出所有图标。（免费和付费版本） |
| Icon-icons.com | 免费图标，格式包括 PNG、ICO、ICNS 和矢量文件 SVG |
| Bootstrap图标 | 这些免费图标专为 Bootstrap 设计，但也适用于任何项目。 |
| 混音图标 | 简洁易用的图标系统 |
| 图标怪兽 | 探索 313 个合集中的 4496 多个免费图标 |
| Vivid.js | 可直接使用的免费开源 SVG 图标包 JavaScript 库。 |
| 图标查找器 | 免费和付费矢量图标，格式包括 SVG、PNG、CSH 和 AI。 |
| 领主 | 50 个免费动画互动图标 |
| 使用动画 | 免费SVG和Json格式动画图标（适用于lottie） |
| css.gg | 700 多个开源 CSS、SVG 和 Figma UI 图标，提供 SVG Sprite、styled-components、NPM 和 API 版本。 |
| IconBros | 7843+ 个免费图标，分为 182 个合集 |
| Material Design 图标 | 一个图标库，允许面向各种平台的设计师和开发人员下载他们在任何项目中所需的格式、颜色和尺寸的图标。 |
| 英雄偶像 | 来自 Tailwind CSS 创建者的免费开源图标。 |
| 宗迪康 | 一套免费的高级SVG图标，供您在数字产品中使用。 |
| 无尽的图标 | 一个提供大量免费图标的网站。图标已添加标签并压缩成图标包。 |
| 伊科蒙 | 浏览超过 5500 个免费图标。添加您想要的任何图标集，即可轻松浏览和搜索其中的图标。 |
| 伊娃图标 | Eva Icons 是一个包含 480 多个精美设计的开源图标的图标包，用于常见操作和物品。 |
| 加密图标 | 一套包含 430 个加密货币和法定货币图标的合集。完全免费。 |
| 伊科纳特 | 完全可自定义且易于使用的矢量图标 |
| 应用图标 | 快速生成适用于 iOS、macOS 和 Android 项目的不同尺寸的应用图标 |
| 线条图标 | 2000+ 个设计师和开发人员必备的线条图标 |
| 永恒之子 | Evericons 是一个包含 460 多个免费图标的大型图标包，由 Aleksey Popov 设计。 |
| SVG 仓库 | 下载免费的SVG矢量图，可用于商业用途。 |
| 转换 | 在线免费将PNG文件转换为SVG格式。（这是它提供的服务之一。） |
| CSS 图标 | 纯 CSS 代码制作的图标集，无任何依赖项，“即取即用”图标 |
| 统一图标 | 数千个图标，一个统一的框架。一个图库，超过 40,000 个矢量图标。 |
| 系统 UI 图标 | 超过 220 个图标，数量还在不断增加。 |
| 标志性公园 | 将 SVG 图标转换为多种主题，并生成 React 图标、Vue 图标和 SVG 图标。 |
| 根图标 | 一套由 Modulz 团队设计的精美 15×15 图标。所有图标均提供 React 组件、SVG 等多种格式。 |
| EOS 图标 | 一款像素级完美、开源的图标字体，提供连字和 SVG 格式。 |
| 离子 | 精美设计的开源图标，可用于网页、iOS、Android 和桌面应用程序。 |
| 荧光图标 | Phosphor 是一套灵活的图标系列，适用于界面、图表和演示文稿。 |
| 迷你图标 | TeenyIcons 是一套 SVG 格式的图标集，易于在 HTML 中使用。 |
| 露西德 | Lucide 是一个开源图标库，是 Feather Icons 的一个分支。 |
| 图标 | 图标浏览器，支持即时搜索，由 Iconify 提供技术支持。 |
| 糟糕的图标 | 免费图标合集。 |
| 图标百科 | Iconspedia 是一个包含大量高质量免费图标的网站。 |
| 图标中心 | 实用又美观的图标，人人适用 |
标志
Logo资源
| 网站 | 描述 |
|---|---|
| 即时徽标搜索 | 数千个免费品牌标志（SVG - PNG） |
| LogoSear.ch | 搜索引擎已索引超过 20 万个 SVG 徽标 |
| SVGPorn | 1000多个高质量SVG标志 |
| 支付系统标志 | 提供 png 和 svg 格式的支付系统徽标 |
| 浏览器徽标 | 高分辨率网页浏览器图标 |
| VectorLogoZone | 格式统一的SVG徽标 |
| 世界矢量标志 | 下载您喜爱的品牌的矢量标志 |
| Logo制作器 | 创建自定义徽标 |
| 免费Logo制作工具 | 快速一体化Logo生成器 |
网站图标
网站图标资源
| 网站 | 描述 |
|---|---|
| 网站图标.io | 从文本、图像或表情符号生成网站图标。可下载 .ico 和 .png 格式文件。 |
| 网站管理员 | 生成所有尺寸和格式的网站图标，以及支持所有浏览器或设备所需的 HTML 代码。 |
| 网站图标生成器 | 为您的网站生成网站图标 (favicon) 文件 |
| RealFaviconGenerator | 为所有平台（Windows、iOS、Android）生成图标 |
| 字体图标 | 使用 Font Awesome 图标生成网站图标和图像 |
图标字体
图标字体资源
| 网站 | 描述 |
|---|---|
| Font Awesome | 网络上最流行的图标集和工具包 |
| Line Awesome | 用现代线条图标替换 Font Awesome 图标 |
| Material 图标 | Material Design 图标库 |
| 离子图标 | Ionic 团队精心打造的开源图标 |
| Zurb基金会图标 | 可自定义的基金会图标 |
| Fontisto 图标 | Fontisto：标志性字体和 CSS 工具包 · 616+ 个免费图标 |
| Boxicons | Boxicons 是一个免费的、精心设计的开源图标集。 |
| 图标字体 | 2100 多个免费图标，为您的创意设计增添趣味 |
| 材质调色板 | 可自由选择 Material Design 的调色板、图标和颜色] |
| Material Design 图标字体 | Material Design 图标字体 |
| VS Code 代码图标 | Visual Studio Code 中的图标字体 |
| 德维康 | Devicon 是一套代表编程语言、设计和开发工具的图标集。 |
| 支付字体 | 一款简洁的网页字体，适用于支付运营商和支付方式。包含 116 个图标。 |
| 天气图标 | Weather Icons 是唯一一款拥有 222 个天气主题图标的图标字体。 |
| 中风 7 | 202 个受 iOS 7 启发而设计的细笔画图标 |
| 果酱图标 | 890 多个手工打造的图标，让你的 Web 应用更加炫酷 |
| 丰特洛 | 200 多个网页图标，您可以自定义图标的名称或代码。 |
| 线 | Linea：包含 750 多个免费图标 |
| 独角兽 | 一套包含 1100 多个免费线条样式图标的集合，可作为网页字体、SVG 图标以及 React、Vue 和 React Native 等 JS 框架的组件使用。 |
| Mobirise 图标 | 一套免费的开源图标集，包含 150 个优雅的、像素级完美的线性图标，提供网页图标字体和 SVG 图标格式。 |
| 英雄图标 | 免费开源 SVG 图标库 |
感谢阅读
如果您喜欢这篇文章，请订阅我的新闻简报
，以免错过我的博客、产品发布和科技新闻，并在Twitter上关注我，获取每日关于 Web 开发资源的讨论。