Free iOS-icons font for Framework7
Branch: master
Clone or download
Latest commit 0edac73 Feb 5, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
build 2.2.0 Release Feb 5, 2019
cheatsheet 2.2.0 Release Feb 5, 2019
css 2.0.0 Release Nov 16, 2018
fonts 2.2.0 Release Feb 5, 2019
node_modules 2.0.0 Release Nov 16, 2018
sketch Update icons Feb 5, 2019
src Update icons Feb 5, 2019
.gitignore Ignore logs Mar 19, 2017
.npmignore Correct build 0.9.0 Oct 29, 2016
LICENSE Initial Builder + sources Oct 28, 2016 2.0.0 Release Nov 16, 2018
bower.json 2.2.0 Release Feb 5, 2019
component.json 2.2.0 Release Feb 5, 2019
composer.json 0.9.0 Release Mar 19, 2017
package-lock.json Update package-lock.json Dec 18, 2018
package.json 2.2.0 Release Feb 5, 2019

Framework7 Icons

The premium and free iOS-icons font for Framework7.

The font is developed to be used with Framework7, but you can use it wherever you see it fits, personal or commercial. It is free to use and licensed under MIT.

Getting Started

  1. Download and extract the font pack

  2. Copy the framework7-icons.css to your project or add this CSS to your own CSS file:

    @font-face {
      font-family: 'Framework7 Icons';
      font-style: normal;
      font-weight: 400;
      src: url("../fonts/Framework7Icons-Regular.eot");
      src: local('Framework7 Icons'),
         url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
         url("../fonts/Framework7Icons-Regular.woff") format("woff"),
         url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
    .f7-icons, .framework7-icons {
      font-family: 'Framework7 Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 28px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-feature-settings: "liga";
      -moz-font-feature-settings: "liga=1";
      -moz-font-feature-settings: "liga";
      font-feature-settings: "liga";
  3. Copy the fonts folder to your project

  4. Ensure the font urls within framework7-icons.css properly reference the fonts path within your project.

  5. Include a reference to the framework7-icons.css file from every webpage you need to use it:

    <link rel="stylesheet" href="path/to/framework7-icons.css">

Or with component:

$ component install nolimits4web/framework7-icons

Or with bower:

$ bower install framework7-icons

Or with npm:

$ npm install framework7-icons


When using webpack, you must add loaders for css and fonts.

{ test: /\.css/, loader: 'style-loader!css-loader' },
{ test: /\.(woff|woff2|eot|ttf)$/, loader: 'url-loader?limit=100000' },

Then you can import the module like so:

import 'framework7-icons';

HTML Example

You can use or included cheatsheet.html file to easily find the icon you want to use. It’s easy to incorporate icons into your web page. Here’s a small example:

<i class="f7-icons">home</i>

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

Styling Icons


Framework7 Icons look best at 28px, but if an icon needs to be displayed in an alternative size, just use CSS font-size rule:

.size-14 { font-size: 14px }
.size-28 { font-size: 28px }
.size-32 { font-size: 32px }
.size-56 { font-size: 56px }
<i class="f7-icons size-14">home</i>
<i class="f7-icons size-28">home</i>
<i class="f7-icons size-32">home</i>
<i class="f7-icons size-56">home</i>


Using the icon font allows for easy styling of an icon in any color.

.color-black { color: #000 }
.color-white { color: #fff }
<i class="f7-icons color-black">home</i>
<i class="f7-icons color-white">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 woff2:

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

    $ brew install fontforge ttfautohint

  2. Install woff2

    $ git clone --recursive $ cd woff2 $ make clean all

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

  4. Run the build command:

    python ./build/


Framework7 Icons font is licensed under the MIT license.