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.

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

Suggestions

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:

License

Known issues

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，下载或克隆所需项目到本地。

访问项目主页 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...',
}

兼容性

建议

联系

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

贡献

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

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

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

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

许可证

已知问题

捐赠

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

This site is open source. Improve this page.