Skip to content
/ icons-font-customization Public

Thanks for forking and starring! If you want any features please raise issues! A collection of over 78,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

License

MIT license
137 stars 40 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

uuware/icons-font-customization

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
dist
dist
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
index.js
index.js
 
 
package.json
package.json
 
 

Repository files navigation

icons-font-customization

A collection of over 78,000 high-quality free SVG icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

Open See all icons, to view all icons. You can change the icon's color, size, and background color, search for icons by name, or save the selected results.

You can also directly download PNG, JPG, ICO, and Apple ICNS image files from the tool's interface.

🔶Desktop Application for Windows, Linux, MacOS is released, or goto Download Releases 🔶

中文说明请参考后半部分

🔶All icons collected here are completely free for your personal or business requirements.🔶
You can use this tool to combine / generate your own icon webfonts for your project from different sources.
This relevant license information is included in generated css file automatically.
logo.png

Icon Collections:

How to use

(If you haven't installed Node.js, go here: Downloading and installing Node.js and npm)
There are a few approaches. Here I list three simple ways to run this project.

First of all, a little information about which project (or package) you should install

Actually there are two projects that can do the same work for you.

  • 1.1, This project (icons-font-customization) contains over 26M of svgs data. You can install this project if you don't mind the large size. Once installed, it works locally and allows for fast copying of icons.
  • 1.2, Either you can install a sub project called icons-font-command, which doesn't contain any icons and is very small. icons-font-command copies icons from Github's repository of icons-font-customization remotely. If you don't have too many icons to generate your font then possibly this is better approach.
    Project icons-font-customization contains icons-font-command. So both use the same commands for font generation.
    Here I use project icons-font-command to explain how to use it. If icons-font-customization is your preference, you'll need to use icons-font-customization in installation commands.

Approach 1, Download or clone this Repository to your local machine.

"Download ZIP" from project home page and unzip it.
Or clone it by running this command:
git clone https://github.com/uuware/icons-font-command.git
Either you'll get this project then cd to that folder and run command to generate icon font (-- -- in command is correct):
npm run generate-font -- --config config-file-path
If you have a config file in the current folder and it's name is icons-font.config.js, then run it without specifying parameters:
npm run generate-font

Approach 2, Use NPM to install icons-font-command globally.

Run command:
npm install -g icons-font-command
Now you can run command at any folder (no matter which project you installed, the command is same and pay attention to -- in command):
icons-font-command --config config-file-path
Or at current folder if file icons-font.config.js exists, then run:
npm run generate-font
You can use this command to copy default configuration file to current folder:
icons-font-command --copyconfig

Approach 3, Install it in your Node.js project.

If you want to use code to operate it, then depending on your needs, run npm i icons-font-command --save-dev at your project's root folder.
Then in your javascript code, you can call it like this:

var IconsFontLite = require('icons-font-command');
IconsFontLite.cmd();

// Or pass parameters
var parameters = {'--config': 'config-file-path'};
var IconsFontLite = require('icons-font-command');
IconsFontLite.generateFont(parameters);

If all good, you'll get results in the output folder. To verify the output, open sample.html or include the icon-style.css in your html to use those icons font.

How to choose your icons and get it in configuration code

1, Open See all icons, then you can view all icons.

You can customize the icons by changing their color, background color and size. Also you can search and click them to choose or cache selected states.
Click button "Populate Configuration" to output configuration code.

2, Paste the configuration code to file "icons-font.config.js".

In Approach 2 you can run command icons-font-command --copyconfig to copy default "icons-font.config.js" to your current folder(where you are running this command), otherwise you need to copy if from root of icons-font-command.
The final structure should look like the example below. However, please don't use this sample; copy the original "icons-font.config.js" instead:

module.exports = {
  fontName: 'i-font',
  outputPath: 'dist/sample/',
  outputName: 'i-font', /* automatically add font extension to it  */
  startChar: 10000, // unicode start number
  icons: [
     /* copy svg from icons-font-customization locally or remotely */
    { path: 'font-awesome/brands/apple.svg', name: 'fa-apple' },
    ...
     /* download svg from any other websites */
    { path: 'https://raw.githubusercontent.com/fontello/awesome-uni.font/29d4e3ff028fc850a21b5eaafde0a83f22f59cf1/src/svg/amazon.svg', name: 'fa-amazon' },
  ],
  fontType: {
    'woff2': true,
    'woff': true,
    'ttf': true,
    'eot': false,
    'svg': false,
  },
  cssTemplate: 'copy from icons-font.config.js...',
  htmlTemplate: 'copy from icons-font.config.js...',
}

Compatibility

  • WOFF2: Chrome 36, Firefox 39, Opera 23, Safari 10, IE no support, Edge 14
    WOFF File Format 2.0. WOFF2 is the next generation of WOFF. The WOFF2 format offers a 30% average compression gain over the original WOFF.

  • WOFF: Chrome 5, Firefox 3.6, Opera 11.10, Safari 5.1, IE 9, Edge 12
    Web Open Font Format. WOFF is basically OTF or TTF with metadata and compression supported by all major browsers.
    It is the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software. Because fonts are compressed, they load faster.

  • TTF: Chrome 4, Firefox 3.5, Opera 10, Safari 3.1, IE 9, Edge 12
    TrueType Font. This format has been supported by all major browsers, but TTF fonts work in IE 9 and later only when the embedding bits are set to installable.

  • EOT:Chrome no support, Firefox no support, Opera no support, Safari no support, IE 6-11
    Embedded OpenType. It’s the only format that IE8 and below will recognize when using @font-face.

  • SVG font: Chrome 4-37, Firefox no support, Opera 10-24, Safari 3.2-14, IE/Edge no support
    Scalable Vector Graphics font. SVG fonts are always uncompressed and the only one allowed by version 4.1 and below of Safari for iOS (iPhone, iPad).

Suggestions

  • 1, use WOFF2 for major browsers except IE;
  • Or: 2, use WOFF for major browsers and IE 9~, Edge 12~
  • Or: 3, combine WOFF2 with TTF for IE8~
    All 1, 2, 3 needs this code in HTML: <i class="ifc-icon icon_name"></i>
  • Or: 4, combine WOFF2 with TTF and plus alternate CSS to support IE6-7, IE8~ and major browsers. Because '.css_class_name:before (not double-colon){ content: "" }' in css is only supported from IE8, so for IE6-7 it needs different code in html (this code is also supported by other mentioned browsers): <i class="icon ifc-icon">&#x66;(icons code)</i>

Contacts

Bug reports & Questions & Suggestion: Issue tracker

Contribute

How to add an new wonderful svg icons project?

If you are the owner of a svg icons project and want to share it to others, then I'm very happy to add it if you send the request to me.

If you want to add for your local development, then you can do like this:

    1. Download or Clone this project https://github.com/uuware/icons-font-customization.git
    1. Create a new folder under /dist/svgs, based on your project name. For example, here we call it new-project, so the new folder should be /dist/svgs/new-project.
    1. Add a json file to describe the information of the project and a license file.
      Please check files in other folders to confirm the json file structure.
    1. Add sub folder (svgs or whatever) and copy svgs to /dist/svgs/new-project/svgs
    1. Run cmd "icons-font-command --maintain" to optimize svgs and create demo page.
    1. Then you can use your new svg icons as same as all others.

License

  • All code (all files, except svgs, fonts) is distributed under CC0-1.0 License.
  • All svgs and fonts are distributed under their primary licenses.
    See information for credits & links to homepages in individual folders under /dist/svgs. This information is also included in generated css file.
    All used trademarks, brands and/or names are the property of their respective owners. The use of these trademarks, brands and/or names does not indicate endorsement of the property holder by us, nor vice versa.

Known issues

  • 1, It seems that svgs with fill-rule="evenodd" do not work correctly
    Currently if svgs have fill-rule="evenodd" then they lose some shapes when change to font. I haven't found any way to do so easily. So if a icon seems weird, just skip to use it.
  • 2, Some icons are reduplicated.

Donation

The main contribution belongs to the elites who created these elves. Please encourage and reward them a cup of coffee!

（中文说明，包含在同一个文件的原因是这种方式发布NPM的时候比较友好）

icons-font-customization（图标字体定制）

一个包含超过 78,000 个高品质免费 svg 图标的集合和生成自己图标字体的工具。所有图标均适用于私人或商业项目。
请点击链接 所有图标以确认图标。此链接支持定制图标颜色、大小和背景色，支持根据关键字检索，保存图标是否选中的状态，或输出选中图标的列表字符串用于下面介绍的生成自己的图标字体。
更新：现在可以直接online下载PNG和JPG, ICON, Apple ICNS格式的图片文件了。
🔶桌面应用程序 已发布，适用于 Windows、Linux、MacOS，或前往 下载发布页🔶

🔶这里收集的所有图标均适用于私人或商业项目🔶
此工具可将不同来源的图标打包生成一个自定义字体文件，还可以下载任何网址的 svg 文件并进行转换打包。
各来源图标的相关许可证信息将会自动包含在生成的 css 文件中。

怎么使用

（如果电脑还没有安装 Node.js, 请下载安装： Downloading and installing Node.js and npm）
使用这个工具的方法有很多，在此列出三种基本的方式。

首先是关于这个项目（包或工具）的信息和该具体选择哪个项目

实际上这里的两个项目都可以达到相同目的。

  • 1.1, 当前此项目（icons-font-customization）包含超过 26M 大小的 svg 文件。如果您不是太在意磁盘空间，那么可以安装这个项目。这样您将能够非常能快速的利用本地 svg 文件生成字体。
  • 1.2, 另一选择是安装 icons-font-command 子项目，它不包含 svg 图标，因此体积更小。 icons-font-command 从 Github 的 icons-font-customization 仓库远程获取图标，如果您不需要大量 SVG 文件，这个选项同样高效。
    • 无论选择哪个项目，使用命令的方式都相同。*
    • 以下示例均基于 icons-font-command 。如果您使用 icons-font-customization ，那么您需要替换安装例子中的项目为 icons-font-customization 。*

方法1，下载或克隆所需项目到本地。

访问项目主页 home page 并点击 "Download ZIP"下载压缩包，解压到本地合适的文件夹。
或者使用 git 命令克隆到本地：
git clone https://github.com/uuware/icons-font-command.git
无论使用哪种方式，您将在本地得到这个项目，然后 cd 到这个项目的根文件夹并运行以下命令生成字体。（注意，命令行中的 -- -- 是正确的）：
npm run generate-font -- --config config-file-path
如果当前目录下有名为 icons-font.config.js 的配置文件，那么可以省略配置文件路径：
npm run generate-font

方法2，使用 NPM 全局安装 icons-font-command （或 icons-font-customization）。

运行：
npm install -g icons-font-command
安装后，您可以在任何文件夹中使用以下命令（无论您安装哪个项目，该命令都是相同的，并注意命令中的 --）：
icons-font-command --config config-file-path
如果当前文件夹中有 icons-font.config.js 配置文件，那么可以省略配置文件路径：
npm run generate-font
您还可以使用以下命令在当前文件夹生成默认配置文件：
icons-font-command --copyconfig

方法3，在您的 Node.js 项目中安装。

如果需要在代码中操作，可在项目根目录运行以下命令： npm i icons-font-command --save-dev 或 npm i icons-font-customization --save-dev 命令。
然后在代码中调用：

var IconsFontLite = require('icons-font-command');
IconsFontLite.cmd();

// Or pass parameters
var parameters = {'--config': 'config-file-path'};
var IconsFontLite = require('icons-font-command');
IconsFontLite.generateFont(parameters);

操作完成后，结果将保存在输出文件夹中. 打开 sample.html 查看结果，或包含 icon-style.css 在您的html中。

如何选择图标并获得在配置中使用的代码

1, 打开 所有图标页面, 查看所有可用图标。

您可以调整图标的颜色、背景色和大小，还可以使用搜索功能快速找到所需图标，并点击图标以选择或缓存选定的状态。
点击 "Populate Configuration" 按钮，输出配置代码。

2, 将配置代码粘贴到文件 "icons-font.config.js" 。

在方法2中，运行 icons-font-command --copyconfig 可在当前文件夹生成默认的 "icons-font.config.js" 配置文件，或从项目icons-font-command的根目录拷贝该文件。
示例的最终结构应该是 （示例结构仅供参考，请使用原始的 "icons-font.config.js" 文件）：

module.exports = {
  fontName: 'i-font',
  outputPath: 'dist/sample/',
  outputName: 'i-font', /* 输出文件名，程序将自动添加扩展名  */
  startChar: 10000, // 图标字体的内部编码
  icons: [
     /* 本地或远程 svg 的路径 */
    { path: 'font-awesome/brands/apple.svg', name: 'fa-apple' },
    ...
     /* 下载任何网址的 svg  */
    { path: 'https://raw.githubusercontent.com/fontello/awesome-uni.font/29d4e3ff028fc850a21b5eaafde0a83f22f59cf1/src/svg/amazon.svg', name: 'fa-amazon' },
  ],
  fontType: {
    'woff2': true,
    'woff': true,
    'ttf': true,
    'eot': false,
    'svg': false,
  },
  cssTemplate: 'copy from icons-font.config.js...',
  htmlTemplate: 'copy from icons-font.config.js...',
}

兼容性

  • WOFF2: Chrome 36, Firefox 39, Opera 23, Safari 10, IE no support, Edge 14
    WOFF 的 2.0 版本。WOFF2 下一代版本的 WOFF。 WOFF2格式比原始WOFF格式提高了30%的平均压缩增益。

  • WOFF: Chrome 5, Firefox 3.6, Opera 11.10, Safari 5.1, IE 9, Edge 12
    Web开放字体格式。WOFF 基本上是 OTF or TTF 上添加了压缩，并被主流浏览器支持。
    它是 Mozilla Foundation，Microsoft，和 Opera Software 和合作结果。因为字体被压缩了，它有更快的加载速度。

  • TTF: Chrome 4, Firefox 3.5, Opera 10, Safari 3.1, IE 9, Edge 12
    TrueType 字体. 所有主流浏览器和IE 9及更高版本都支持这种格式。

  • EOT:Chrome no support, Firefox no support, Opera no support, Safari no support, IE 6-11
    嵌入式 OpenType。这是唯一可以在IE8及以下版本中使用的字体，并且需要@font-face方式加载。

  • SVG font: Chrome 4-37, Firefox no support, Opera 10-24, Safari 3.2-14, IE/Edge no support
    可缩放矢量图形字体。 SVG 字体是未压缩的，唯一可以在 version 4.1 and below of Safari for iOS (iPhone, iPad) 中使用的字体。

建议

  • 1, 如果不需要支持 IE，使用 WOFF2 即可支持所有主流浏览器
  • 或 2, 使用 WOFF 可支持所有主流浏览器及 IE 9及以上, Edge 12及以上
  • 或 3, 同时使用 WOFF2 和 TTF 可支持所有主流浏览器及 IE 8 及以上
    所有1、2、3均需使用HTML代码：<i class="ifc-icon icon_name"></i>
  • 或者 4, 同时使用 WOFF2 和 TTF 和不同 CSS 代码可支持 IE 6-7 及所有主流浏览器和 IE 8 及以上。因为从IE8开始支持 '.css_class_name:before (注意不是两个冒号){ content: "" } CSS 代码。所以IE6-7需使用CSS代码：<i class="icon ifc-icon">&#x66;(icons code)</i>

联系

缺陷报告、问题和建议：Issue tracker

贡献

想分享您的 SVG 图标项目吗？欢迎联系我！本地开发时可按以下步骤操作：

如何添加一个新的精彩的 svg 图标项目？

如果您有一个 svg 图标项目想和其他人分享，我会非常乐意的添加它们。请联系我。

如果您想为您的本地开发添加，则可以这样做：

  • 1.下载或克隆此项目 https://github.com/uuware/icons-font-customization.git
  • 2.根据您的项目名称在 /dist/svgs 下创建一个新文件夹。例如，这里我们称之为 new-project，所以新文件夹应该是 /dist/svgs/new project。
  • 3.添加描述项目信息的 json 文件和许可文件。（请在 /dist/svgs/ 下的其他文件夹中确认json文件结构）
  • 4.创建子文件夹（如svgs），并将图标复制到 /dist/svgs/new-project/svgss。
  • 5.运行 "icons-font-command --maintain" 命令以优化 svg 并创建演示页面。
  • 6.然后，您可以像其他图标一样使用新的svg图标。

许可证

  • 所有代码（除 svg 、字体外的所有文件）均在 CC0-1.0 许可证下分发。
  • 所有 svg 和字体都在其原始许可证下分发。
    请参阅/dist/svgs下各个文件夹中包含的许可证和链接的信息。此信息也包含在生成的css文件中。
    所有包含的商标、品牌和/或名称都是其各自所有者的财产。

已知问题

  • 1, SVG 中的 fill-rule="evenodd" 可能导致显示不正确。
    当前如果 svg 有 fill-rule="evenodd"， 生成字体时可能会丢失一些形状。目前暂无简单解决方案，因此如果有的图标不满足您的要求，请跳过它们。
  • 2, 部分图标重复。

捐赠

主要贡献属于创造这些精灵的精英们。请鼓励并奖励他们一杯咖啡！

About

Thanks for forking and starring! If you want any features please raise issues! A collection of over 78,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

Resources

Readme

License

MIT license
Activity

Stars

137 stars

Watchers

6 watching

Forks

40 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 17
+ 3 contributors

Languages