为 Ionic 定制的优质图标库


The premium icon font for Ionic. Designed by @benjsperry.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Drifty, nor vice versa.

Visit and check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for “arrow” we call up every icon that could possibly be used as an arrow. We’ve also included each icon’s class name for easy copy/pasting when you’re developing!

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Getting Started

  1. Download and extract the font pack
  2. Copy the ionicons.css to your project
  3. Copy the fonts folder to your project
  4. Ensure the font urls within ionicons.css properly reference the fonts path within your project.
  5. Include a reference to the ionicons.css file from every webpage you need to use it.

Or install with component:

$ component install driftyco/ionicons

Or perhaps you're known to use bower?

$ bower install ionicons

HTML Example

You can use to easily find the icon you want to use. Once you've copied the desired icon's CSS classname, simply add the icon and icon's classname, such as ion-home to an HTML element.

<i class="icon ion-home"></i>

Build Instructions

This repo already comes with all the files built and ready to go, but can also build the fonts from the source. Requires Python, FontForge and Sass:

1) Install FontForge, which is the program that creates the font files from the SVG files:

$ brew install fontforge ttfautohint

2) Install Sass

$ gem install sass

3) Add or subtract files from the src/ folder you'd like to be apart of the font files.

4) Modify any settings in the builder/manifest.json file. You can change the name of the font-family and CSS classname prefix.

5) Run the build command:

python ./builder/


Ionicons is licensed under the MIT license.


Ionic 定制的优质的 web 字体图标库。 由 @benjsperry 设计。


访问 体验搜索功能,具有图标类名和样式关键词的识别。比如,如果你搜索 "arrow",你将会得到所有可用作箭头的图标。除此之外,我们还包含了每个图标的样式名,以便于你在开发中复制和粘贴!

我们希望的是在 Ionic 中使用这个字体包,但是并没有限制使用的意思。你可以在任何你觉得合适的地方使用它,个人或商业都行。Ionicons 是免费使用的,在 MIT 进行许可。


  1. 下载并解压字体包
  2. ionicons.css 拷贝到你的项目中
  3. fonts 文件夹拷贝到你的项目中
  4. 确保 ionicons.css 中的字体文件的链接地址是正确指向 fonts 文件的路径的。
  5. 在每一个你需要用到的 web 页面中引入 ionicons.css 文件。

或者通过 component 安装:

$ component install driftyco/ionicons

或者通过 bower 安装?

$ bower install ionicons


你可以在 很轻易地找到你想要的图标,一旦你复制了所需图标的 CSS 类名,只需简单地将 icon 和图标类名(例如 icon-home)添加到一个 HTML 元素中。

<i class="icon ion-home"></i>


该库已经将所有文件构建好,随时可以使用。但也可以从源代码构建,这需要用到 Python, FontForge 和 Sass:

1) 安装 FontForge(一个从 SVG 文件创建字体的项目):

$ brew install fontforge ttfautohint

2) 安装 Sass

$ gem install sass

3) 按照自己的需求从 src/ 文件夹中添加或删减文件。

4) 修改 builder/manifest.json 文件中的设置,你可以修改 font-family 的名字和 CSS 类名前缀。

5) 运行构建命令:

python ./builder/


Ionicons 是在 MIT license 下进行许可的。