nxtyle-icons
Advanced tools
Readme
A modern open source font icon library for applications.
Note: We are using unicode character (UTF-8), a Private Use Area (PUA). which only support range of 6,400 code points only. Due to this imitation we can't define all webfont icon together. So we grouped icons by icon category. Each group has its own code and code points are shared with other icon font groups as well. So we can't use all group font together on a single web app, even if you already using another web font Please make sure there won't be any conflict on code points.
Groups:
So Please check available icons in different groups and based on your requirement choose your icon group for your application.
Example
import "nxtyle-icons/feather/index.css";
import "nxtyle-icons/box-icons/regular/index.css";
This may end up on conflict, if you try to use feather icon, since you loaded box-icons next to your feather icon (due to cascading of styles) your feather icon refers to box-icon code point. Anyway you can import same group icons that never share common code points. so below snippet will works fine.
import "nxtyle-icons/box-icons/regular/index.css";
import "nxtyle-icons/box-icons/solid/index.css";
Based on response from users, We can work on to group general icons like logos, crypto icons as unique code point across all icon group. those code points will never used with other group icons.
npm i nxtyle-icons
If you want to include in Web application JS file
import "nxtyle-icons/feather/index.css";
If you want to include using sass
@import "nxtyle-icons/feather/index.css";
That's it. you can now use icons
<i class="nxi nxi-fe-airplay" />
view all available feather icons.
Box Icons has three types of icon variants. Namely
If you want to include in Web application JS file
import "nxtyle-icons/box-icons/regular/index.css";
If you want to include using sass
@import "nxtyle-icons/box-icons/regular/index.css";
That's it. you can now use icons
<i class="nxi nxi-bx-alarm-add" />
view all available Box Regular icons.
If you want to include in Web application JS file
import "nxtyle-icons/box-icons/solid/index.css";
If you want to include using sass
@import "nxtyle-icons/box-icons/solid/index.css";
That's it. you can now use icons
<i class="nxi nxi-bxs-alarm-add" />
view all available Box Solid icons.
If you want to include in Web application JS file
import "nxtyle-icons/box-icons/logos/index.css";
If you want to include using sass
@import "nxtyle-icons/box-icons/logos/index.css";
That's it. you can now use icons
<i class="nxi nxi-bxl-github" />
view all available Box logo icons.
Phosphor Icons has six types of icon variants. Namely
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/regular/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/regular/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book" />
view all available Phosphor regular icons.
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/bold/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/bold/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book-bold" />
view all available Phosphor bold icons.
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/fill/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/fill/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book-fill" />
view all available Phosphor fill icons.
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/light/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/light/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book-light" />
view all available Phosphor light icons.
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/thin/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/thin/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book-thin" />
view all available Phosphor thin icons.
If you want to include in Web application JS file
import "nxtyle-icons/phosphor-icons/duotone/index.css";
If you want to include using sass
@import "nxtyle-icons/phosphor-icons/duotone/index.css";
That's it. you can now use icons
<i class="nxi nxi-pp-address-book-duotone" />
view all available Phosphor duotone icons.
Teeny Icons has two types of icon variants. Namely
If you want to include in Web application JS file
import "nxtyle-icons/teeny-icons/outline/index.css";
If you want to include using sass
@import "nxtyle-icons/teeny-icons/outline/index.css";
That's it. you can now use icons
<i class="nxi nxi-tny-outline-360" />
view all available Teeny outline icons.
If you want to include in Web application JS file
import "nxtyle-icons/teeny-icons/solid/index.css";
If you want to include using sass
@import "nxtyle-icons/teeny-icons/solid/index.css";
That's it. you can now use icons
<i class="nxi nxi-tny-solid-360" />
view all available Teeny solid icons.
If you want to include in Web application JS file
import "nxtyle-icons/bootstrap-icons/index.css";
If you want to include using sass
@import "nxtyle-icons/bootstrap-icons/index.css";
That's it. you can now use icons
<i class="nxi nxi-bi-award-fill" />
view all available bootstrap icons.
If you want to include in Web application JS file
import "nxtyle-icons/cryptocurrency-icons/index.css";
If you want to include using sass
@import "nxtyle-icons/cryptocurrency-icons/index.css";
That's it. you can now use icons
<i class="nxi nxi-crp-btc" />
view all available cryptocurrency icons.
Remix Icons categorized by different icon variants based on use cases. Namely
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/arrows/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/arrows/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-arrows-arrow-down-circle-fill" />
view all available remix arrows icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/buildings/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/buildings/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-buildings-bank-fill" />
view all available remix buildings icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/business/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/business/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-business-presentation-fill" />
view all available remix business icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/communication/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/communication/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-communication-chat-1-line" />
view all available remix communication icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/design/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/design/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-design-brush-fill" />
view all available remix design icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/development/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/development/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-development-bug-2-line" />
view all available remix development icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/device/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/device/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-device-battery-2-charge-line" />
view all available remix device icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/document/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/document/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-document-contacts-book-upload-fill" />
view all available remix document icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/editor/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/editor/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-editor-emphasis-cn" />
view all available remix editor icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/finance/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/finance/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-finance-24-hours-fill" />
view all available remix finance icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/health-medical/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/health-medical/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-health-medical-brain-fill" />
view all available remix health-medical icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/logos/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/logos/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-logos-alipay-fill" />
view all available remix logos icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/map/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/map/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-map-anchor-fill" />
view all available remix map icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/media/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/media/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-media-4k-line" />
view all available remix media icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/others/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/others/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-others-basketball-fill" />
view all available remix others icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/system/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/system/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-system-add-box-line" />
view all available remix system icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/user-faces/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/user-faces/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-user-faces-account-box-fill" />
view all available remix user-faces icons.
If you want to include in Web application JS file
import "nxtyle-icons/remix-icons/weather/index.css";
If you want to include using sass
@import "nxtyle-icons/remix-icons/weather/index.css";
That's it. you can now use icons
<i class="nxi nxi-rmx-weather-blaze-line" />
view all available remix weather icons.
FAQs
A modern open source font icon library for applications.
We found that nxtyle-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.