PHPackages nolimits4web/framework7-icons - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. nolimits4web/framework7-icons ActiveLibrary[Utility & Helpers](/categories/utility) nolimits4web/framework7-icons ============================= Free iOS-icons font for Framework7 v3.0.1(6y ago)22850[10 PRs](https://github.com/nolimits4web/Framework7-Icons/pulls)MIT Since Oct 29Compare [ Source](https://github.com/nolimits4web/Framework7-Icons)[ Packagist](https://packagist.org/packages/nolimits4web/framework7-icons)[ Docs](http://framework7.io/icons/)[ RSS](/packages/nolimits4web-framework7-icons/feed)WikiDiscussions Synced 6d ago READMEChangelogDependenciesVersions (25)Used By (0) [![](https://camo.githubusercontent.com/944a61a1d4ff988f088a7787267d8f7b069b4ef68ed89a713dc861c5829baf58/68747470733a2f2f6672616d65776f726b372e696f2f692f737570706f72742d62616467652e706e67)](https://www.patreon.com/framework7) Framework7 Icons ================ [](#framework7-icons) The premium and free iOS-icons font for [Framework7](https://framework7.io/). The font is developed to be used with [Framework7](https://framework7.io/), but you can use it wherever you see it fits, personal or commercial. It is free to use and licensed under [MIT](http://opensource.org/licenses/MIT). Getting Started --------------- [](#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: local('Framework7 Icons'), local('Framework7Icons-Regular'), 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: ``` ``` Or with [component](https://github.com/componentjs/component): ``` $ component install framework7io/framework7-icons ``` Or with [bower](http://bower.io/): ``` $ bower install framework7-icons ``` Or with [npm](http://npmjs.com/): ``` $ npm install framework7-icons ``` Webpack ------- [](#webpack) When using webpack, you must add loaders for css and fonts. ``` { test: /\.css/, loader: 'style-loader!css-loader' }, { test: /\.(woff|woff2|ttf)$/, loader: 'url-loader?limit=100000' }, ``` Then you can import the module like so: ``` import 'framework7-icons'; ``` HTML Example ------------ [](#html-example) You can use [framework7.io](https://framework7.io) 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: ``` house ``` This example uses a typographic feature called [ligatures](http://alistapart.com/article/the-era-of-symbol-fonts), 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 ------------- [](#styling-icons) ### Sizing [](#sizing) 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; } ``` ``` house house house house ``` ### Coloring [](#coloring) Using the icon font allows for easy styling of an icon in any color. ``` .color-black { color: #000; } .color-white { color: #fff; } ``` ``` house house ``` Using in `data-` attributes --------------------------- [](#using-in-data--attributes) Add the following CSS rule: ``` .f7-icons[data-icon]:before { content: attr(data-icon); color: inherit; } ``` And now you can use it with `data-` attributes: ``` ``` SVG Components -------------- [](#svg-components) Since v 4.0.0 there are pure SVG components available for React, Svelte and Vue. In React: ``` import { House, HeartCircle } from 'framework7-icons/react'; export default () { // ... return ( ... ) } ``` In Svelte: ``` ... ... ... import { House, HeartCircle } from 'framework7-icons/svelte'; // ... ``` In Vue: ``` ... ... ... import { House, HeartCircle } from 'framework7-icons/vue'; export default { components: { f7House: House, f7HeartCircle: HeartCircle, }, ... } ``` Build Instructions ------------------ [](#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/generate.py License ------- [](#license) Framework7 Icons font is licensed under the [MIT license](http://opensource.org/licenses/MIT). ### Health Score 34 — LowBetter than 74% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity22 Limited adoption so far Community2 Small or concentrated contributor base Maturity73 Established project with proven stability How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~54 days Recently: every ~62 days Total 25 Last Release 2281d ago Major Versions v0.9.1 → v2.0.02018-11-16 v2.3.1 → v3.0.0-beta.12019-09-02 ### Community Maintainers ![](https://www.gravatar.com/avatar/d5fe2b137d92a4a7bbf1ae2648f9c229cf7e63002f6abbc2ceb3118387f92a56?d=identicon)[nolimits4web](/maintainers/nolimits4web) --- Tags iconsiosicon fontfontsframework7web fontios icons ### Embed Badge ![Health badge](/badges/nolimits4web-framework7-icons/health.svg) ``` [![Health](https://phpackages.com/badges/nolimits4web-framework7-icons/health.svg)](https://phpackages.com/packages/nolimits4web-framework7-icons) ``` ### Alternatives [driftyco/ionicons The premium icon font for Ionic Framework. 18.1k90.2k8](/packages/driftyco-ionicons)[twbs/bootstrap-icons Official open source SVG icon library for Bootstrap 8.1k2.3M89](/packages/twbs-bootstrap-icons)[simple-icons/simple-icons SVG icons for popular brands 25.6k224.2k4](/packages/simple-icons-simple-icons)[pkpass/pkpass PHP PKPass class for iOS Wallet 9813.6M14](/packages/pkpass-pkpass)[nativephp/mobile NativePHP for Mobile 1.1k102.1k138](/packages/nativephp-mobile)[eo/passbook iOS Passbook for PHP 2651.7M3](/packages/eo-passbook) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)