@iconplanet/uicons v1.1.0
IconPlanet
Source and search
You can find thousands uicon in IconPlanet website.
About
Install the latest version of Uicons – which includes each individual icon in SVG format, CSS stylesheets and font files – and easily keep your project up to date with the latest icons and enhancements through the npm package manager.
npm package
You can find this package page on npm here.
Github repository
Also can give us new star ⭐️ on IconPlanet GitHub repo to support us.
Get Started
Installation
Install latest version of IconPlanet uicons package with npm package manager:
npm i @iconplanet/uiconsIn short, with this method you get the same result as with the downloadable format but in an easier-to-update package.
This package contains the following directories and files:
| Path | What it is |
|---|---|
| /css | Stylesheets for Web Fonts |
| /svg | Individual SVG for each icon |
| /webfont | Web Font files used with CSS |
CSS @import
1. Import all packages
You can import all available packages with importing this file:
@import '@iconplanet/uicons/css/ip-all';2. Single style
Or just import certain packages individually:
@import '@iconplanet/uicons/css/ip-[PACKAGE-NAME]';
@import '@iconplanet/uicons/css/ip-brands';| Package Name | Prefix | Example |
|---|---|---|
| brands | ip-brands | <i class="ip-brands-instagram"> |
| awesome-regular | ip-ar | <i class="ip-ar-user"> |
| flat-bold-rounded | ip-fbr | <i class="ip-fbr-home"> |
Use icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Iconic Project</title>
<!-- you should import IconPlanet Uicons css files inside this file -->
<link rel="stylesheet" href="[/path-to-your-project/css-file.css]"/>
</head>
<body>
<i class="ip-brands-instagram"></i>
<i class="ip-ar-book"></i>
<i class="ip-frr-user"></i>
<i class="ip-fbr-arrow-right"></i>
</body>
</html>