Framework7 Icons

What Framework7 Icons is

Framework7 Icons is an iOS-style icon font made for Framework7, though it can also be used in other projects where it fits. It is free for personal and commercial use under the MIT license, with a listed price of $0. The font is available as WOFF2, WOFF, TTF, and SVG components, with multiple styles. For web pages, the documentation demonstrates using the f7-icons class with an icon name such as house. CSS can adjust icon size and color; the documentation identifies 28px as a size at which icons look best. The font is a separate download and is not bundled with Framework7. The repository lists npm install framework7-icons as an installation option, and includes SVG component imports for React, Svelte, and Vue. Webpack projects need loaders for CSS and font files. The documentation suggests using Framework7 Icons for an iOS theme and Material Icons for a Material theme.

Who it suits

It suits developers building web interfaces who want an iOS-style icon font, including those working outside Framework7. React, Svelte, and Vue developers can use the listed SVG component imports.

Getting started

1. Open the Framework7 Icons website
2. Install the framework7-icons package with npm or download the font separately
3. Render icons in HTML with the f7-icons class and an icon name
4. Use CSS to set icon size or color
5. Add CSS and font loaders when using Webpack
6. Import SVG components for React, Svelte, or Vue

Verdict

Framework7 Icons offers a free, separately installed icon font with several web-friendly formats and framework integrations. Its iOS styling is the documented fit for iOS themes; the documentation points Material-theme users to Material Icons instead.