Usage:
OpIcon is a completely open-source icon set with 280+ icons crafted for web apps. OpIcons was built for Opacity CSS Framework, so icons have only outline versions. When used with Ionic, the ion-icon component will automatically use the correct version based on your platform.
Using the Font Icon
The font icon is compatible with previous versions of Ionicons. If you're using Ionicons for the first time we strongly recommend using the ion-icon web component instead.
An advantage to the font icon file is that all of the icons are in one file. A disadvantage to the font icon file is that all of the icons are in one file. Additionally, large font files have a negative impact on a webpage's time to first paint.
In most cases it may be better to request a small number of svgs using the web component method. A bonus with the web component is that it uses Intersection Observer to only request icons which are viewable by the users (icons above the fold). However, if a webpage has to show many icons at once (such as this website's homepage which is showing 700+ icons on one page), the font icon may be a better choice.
Installation
To embed the Ionicons font icon, copy this code into the <head> of the HTML document.
<link href="https://cdn.jsdelivr.net/gh/codeOpacity/op_icons@main/op_icons.all.min.css" rel="stylesheet">
Basic usage
Use the icon index to look up the name of the icon you want to use. The icon's CSS class name will be prefixed with op-, followed by the the icon name.
<span class="op-heart"></span>
Font Size
you can set a specific size by applying the font-size CSS property on the ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)
span.[icon name] {
font-size: 64px;
color: blue;
}