一些额外且好用的 icon 图库

news2025/4/3 22:03:06

一些额外且好用的 icon 图库

之前偶然逛到 最佳 Icon 图标库推荐,收藏等于学会,这个真的挺好用的,不过这里的 icon 都是和 React 组件绑定了,额外补充一些不和框架绑定的图库

font awesome

这个应该用的人满多的,算是把 icon 当成 font 用,引入 CDN 的话,直接在 html/css 里面也可以使用,地址为:https://fontawesome.com/

使用 font awesome 要注意一下版本,5 和 6 的图库和使用差挺多的,比如说 5 会使用 fa fas 这种类去添加样式,6 就移除了

v5v6
在这里插入图片描述外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

免费版有两千多个图标,应对正常的使用差不多是够了的,付费版有 2w6,这个看具体需求了

icomoon

网址为:https://icomoon.io/#home,这个用的也挺多的,而且可以单独选择 icon,生成对应的字体文件(ttf),随后通过 CSS 的 @font-face 导入使用

找 library 可以通过这个网址进入:https://icomoon.io/app/#/select/library,它们的导航也没很友好,目前有的 packages 如下:

在这里插入图片描述

有个需要注意的就是使用的 License,虽然不少部分都是署名可免费商用,不过还是要注意一下

阿里矢量图库

网址 https://www.iconfont.cn/,我觉得这个知道的应该蛮多的吧,一般来说这里每个 font 都有一个 set,也是可以根据整个 set 下载,不过我一般都找单独的 icon 用,现在做的脸插画都有了……

如果要用在项目里的话,优势在于你想找的什么都有,缺点在于有些很好看的风格太过独特,不一定很好搭配,如:

在这里插入图片描述

有些集成的用起来就很方便:

在这里插入图片描述

不过需要注意,icons 商用前一定要问版权和收费问题

iconfinder

网址:https://www.iconfinder.com/

它其实有一些已经配好成套的 icon 可以使用:

在这里插入图片描述

另外网站上宣称是有六百万个 icons,应该可以满足不少的需求

这个网址也包括了一些 3d、贴纸设计等,有需求的可以找一下有没有看得上的 icons

不过比较有趣的图库很大可能是付费使用的:

在这里插入图片描述

flaticon

网址:https://www.flaticon.com,我看了一下这里大部分使用都是署名就可以免费使用(包括商用),它的一些 icon 更具有特色,如:

在这里插入图片描述

并且还有动图:

在这里插入图片描述

Atom animated icons created by Freepik - Flaticon

这个主要的问题也是一样,成套比较苦难,而且找到满意的 icon 之后,再寻找适配的风格也会比较的苦难。加上普通图免费版本只有 png,动图的格式免费版的只有 gif/mp4/png,虽然格式倒是很多:

在这里插入图片描述

thenounproject

这是最后一个,网址为https://thenounproject.com/,它所有的 icon 都是需要著权使用,免费版只能下载无法修改的版本。不过我觉得它的 icon 倒是都挺有特色的:

在这里插入图片描述

补充

最近在看思维导图的内容,然后发现其实这些矢量图库真的蛮好用的,比如说:

在这里插入图片描述

在这里插入图片描述

这几个列举的 icon 都能比较轻松的代替 function/method 这种,之前可能还真的没想到用 </> 这个颜文字代替 编程/函数/方程,还有 mindmap:

在这里插入图片描述

这两个(第一和第三)应该是我看到最简单,最好画,并且一眼就能够联想到思维导图的 icon(特别是第三个)

对比下来,如果是简笔画,那么优先找 thenounproject,如果需要图,可以是 cv 的,可以看看 iconfinder,阿里的关键字会稍微有点差,但是也能找到相关联的内容。

当然,如果知道 tech 或者中文的关键字,权重为阿里 > iconfinder > thenounproject。最后一个 tech 方面的 icon 挺少的,比如说关于 vue 的搜索:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我又试着找了一下 spring,另外两个网站基本都是春天、花朵、弹簧这种,阿里的至少给了个 spring-boot 的灰色 icon。搜索 spring boot,阿里 和 iconfinder 都给了一个结果,thenounproject 则是全都和靴子相关

总归说如果是几个网站结合一下,基本上想找的内容差不多都能找到了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1136552.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于springboot实现时间管理系统项目【项目源码+论文说明】

基于springboot实现时间管理系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括时间管理系统的网络应用&#xff0c;在外国时间管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。时…

KNN 和 SVM 图片分类 任务 代码及细节分享

使用KNN (K-最近邻) 方法进行图像分类也是一个常见的选择。以下是 使用sklearn的KNeighborsClassifier进行图像分类的Python脚本&#xff1a; import os import cv2 import numpy as np import logging from sklearn.neighbors import KNeighborsClassifier from sklearn.met…

jdbc 中 Statement 不能避免注入式漏洞(SQL注入漏洞)

注入式漏洞 也称为 SQL注入漏洞&#xff0c;是一种常见的应用程序安全漏洞。当应用程序将用户输入的数据直接 拼接 到SQL查询语句中&#xff0c;而未对输入进行有效的过滤和转义时&#xff0c;攻击者可通过构造恶意的输入来执行非法的SQL语句&#xff0c;从而实现对应用程序的攻…

esp32c3-microPython开发固件烧录用户手册

esp32c3-microPython开发固件烧录用户手册1.4 文章目录 esp32c3-microPython开发固件烧录用户手册1.4烧录所需硬件软件工具Thonnyflash_download_tools 插座与USB转TTL模块之间接线esp32-C3版本插座&#xff08;底板4针&#xff09; 下载对应的 MicroPython固件烧录MicroPython…

grafana InfluxDB returned error: error reading influxDB 400错误解决

问题&#xff1a; 如图提示错误解决 确认自己的docker容器是否配置了以下3个字段 DOCKER_INFLUXDB_INIT_USERNAMExxx DOCKER_INFLUXDB_INIT_PASSWORDyyy DOCKER_INFLUXDB_INIT_ADMIN_TOKENzzz 如果有&#xff0c;在grafana中需要添加header配置Header: Authorization , Value…

将自己本地项目上传到git,IDEA图文操作

文章目录 一、初始化git仓库二、gitee创建仓库三、输入自己仓库的地址四、在添加所修改的文件可能的错误 五、合并需上传文件六、上传参考文档 一、初始化git仓库 在自己的项目中&#xff0c;命令行中输入 git init二、gitee创建仓库 新建仓库 设置仓库参数&#xff0c;设置…

C语言的const函数修饰指针

文章目录 一、const函数的作用 int a 10; int *p ; p &a;从上面的代码分析&#xff0c;p 存放的就是a的地址&#xff0c; *p 存放的就是 a 的值。 一、const函数的作用 一旦使用了const函数修饰一个变量&#xff0c;那么这个变量就无法变化了。 所以下面三种情况&#…

分享一下在微信小程序里怎么添加会员充值功能

在微信小程序中添加会员充值功能&#xff0c;可以提升用户的消费体验&#xff0c;增加商家的销售收入。下面是一篇关于如何在微信小程序中添加会员充值功能的软文。 标题&#xff1a;微信小程序实现会员充值功能&#xff0c;提升用户忠诚度与销售收入 随着移动支付的普及&…

JavaSE 二叉树

目录 1 树型结构1.1 概念1.2 树的表示形式1.3 树的应用 2 二叉树2.1 概念2.2 二叉树的基本形态2.3 两种特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储2.6 二叉树的基本操作2.6.1 二叉树的遍历2.6.2 二叉树的基本操作 2.7 基础练习题2.7.1 二叉树的前序遍历2.7.2 二叉树中序遍历…

怎么防止U盘复制电脑文件

怎么防止U盘复制电脑文件 安企神U盘管理系统下载使用 说到防止U盘复制电脑文件也是一个老生常谈的话题了&#xff0c;因为U盘的主要目的是在不同设备之间传输文件。对于企业来说&#xff0c;有的重要信息是不能对外泄露的&#xff0c;出于安全考虑&#xff0c;企业往往是禁止…

SpringDoc上传附件或文件 - Swagger3

摘要 从Swagger2 升级到 Swagger3 之后发现对于附件出现了问题。 依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-ui</artifactId><version>1.7.0</version></dependency>问题描述 在Sw…

Leetcode—80.删除有序数组中的重复项II【中等】

2023每日刷题&#xff08;十&#xff09; Leetcode—80.删除有序数组中的重复项II 双指针实现代码 int removeDuplicates(int* nums, int numsSize){int i 0;int j 1;int k 1;int tmp nums[i];while(j < numsSize) {if(nums[j] tmp && k < 2) {nums[i] n…

百元挂耳式耳机哪款好一点、优质的挂耳式耳机推荐

近些年人们对耳机的依赖变得越来越重要&#xff0c;很多人玩游戏、听音乐、看电视都离不开耳机&#xff0c;耳机为我们带来美妙音乐的同时带来了很强烈的安全感。然而&#xff0c;传统的入耳式耳机存在一些问题&#xff0c;如容易滋生细菌&#xff0c;潜在地引发耳部炎症。因此…

万能鼠标设置 SteerMouse v5.6.8

鼠标可谓是用户们在使用电脑时候的必备外接设备呢&#xff01;适合你自己的鼠标设置也绝对能够优化你的Mac使用体验&#xff01;想要更好的Mac体验就试试用Steermouse Mac版吧。它通过软件来自由设置你的鼠标操作&#xff01;在这款万能鼠标设置工具中&#xff0c;用户可以在偏…

in ,exists,any在数据库中数据失真的问题

简介 早期文章已经介绍了in ,exists在数据库如果遇到空值会发生数据失真的情况&#xff0c;前段时间&#xff0c;又有人问到这一点&#xff0c;本篇文章再次对mysql8.0/oracle19c/postgresql-14进行测试&#xff0c;对于表中存在空值的集中匹配情况进行解析。 插入测试数据 …

蓝牙助听模块场景分析之三

蓝牙助听模块场景分析之三 使用经典蓝牙以及助听方案&#xff0c;低成本&#xff0c;支持蓝牙音频。 配合蓝牙耳机使用&#xff0c;蓝牙耳机可以是TWS、OWS、骨传导耳机、头戴耳机等等。 助听模块&#xff08;QCC3040 QCC3056 QCC3086&#xff09;可以放桌子上&#xff0c;来拾…

用Java代码更改PDF页边距,批量处理PDF文档

页边距是指文档页面主要内容以外的边缘区域。在创建 PDF 文档时&#xff0c;通常会设定每页固定页边距&#xff0c;以确保页面的统一性。然而&#xff0c;在某些情况下&#xff0c;已创建的 PDF 文档可能需要调整页边距以获得更好的视觉效果或满足打印需求。这通常是一项复杂的…

java毕业设计基于springboot的民宿预订信息网站

运行环境 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven 项目介绍 民宿短租…

为什么C++能搜到的框架介绍都好抽象?

为什么C能搜到的框架介绍都好抽象&#xff1f; 那是因为c每次都要自建生态 随便一个库发展到一定阶段&#xff0c;它就开始跨界&#xff0c;做得又大又全 结果就是&#xff0c;虽然都叫c&#xff0c;但其实是由一大堆不同生态组成的统称 c跟c的差异&#xff0c;比java跟c的差…

moea中return, risk的计算

M - np.sum(np.dot(x.T, r))为什么return的定义是这样的&#xff1f;其中x是一个向量&#xff0c;表示对每个股份的投资比例&#xff0c;r是各个股份的回报return的均值 V np.sum(np.dot(x, x.T) * np.dot(s, s.T) * c)为什么risk的定义是这样的&#xff1f;其中x是一个向量&…