icon speaks louder than text
- ic-on is built with Web Components (Custom Elements), making it natively compatible with any framework: React, Angular, Vue, or even plain HTML.
- Unlike traditional icon libraries that force you into an endless loop of downloading and unzipping their assets just for starting a simple project, ic-on is installed once and for all: globally.
- Once installed, you can use it in any project across your system without ever having to reinstall.
Get access to over 19,700 icons from popular open-source projects, including:
- Iconify makes ic-on the world's first extensible icon library by allowing you to add your own icons to our ecosystem.
- Simply capture the icon of your liking (via a screen snip) and run:
ic-onify <image>- This processes the image, removes its background, and saves it to the global
icons registry- making it a reusable component in our library accessible anywhere just like any other
ic-on.
- Shipping an entire icon library for every project is wasteful if you only use a few icons.
- The
ic-on extractcommand scans your project and extracts only the icons you actually use into a local folder, drastically reducing your app's size and saving valuable space.
To install ic-on, just run the following command:
npm i -g @ic-on/main --foreground-scriptsTip: The
--foreground-scriptsflag ensures that any necessary post-install scripts run immediately.
To integrate ic-on into your website, add the following script to your
<head>:
<script src="http://localhost:3411"></script>Then, insert icons using the <ic-on> element:
<ic-on i="1k"></ic-on>To explore and get a list of available icons, open your browser and navigate to:
http://localhost:3411/client/search.html.
Here you can query all the icons in your system through a user friendly search
interface.
Since ic-on is built from Web Components, it works in any framework out-of-the-box:
ic-on reactThis generates an ic-on.tsx file that:
- Declares the necessary JSX typings to prevent TypeScript errors.
- Ensures that
<ic-on>is recognized as a valid element in your React project.
Note: Do not delete
src/ic-on.tsx- it is required for React compatibility.
- Include the same script in your
index.html:
<script src="http://localhost:3411"></script>- Use
<ic-on>as a standard HTML element. - You might encounter slight errors, in some frameworks like Angular, as their compilers may not recognize as a valid element. However, these issues can be easily resolved with minimal workarounds.
Note: We will soon release framework-specific guides in our forums to help you with seamless integration. Stay tuned!
Once installed, ic-on provides several commands to streamline your workflow:
- Purpose: Downloads all icons used in your project into a local folder.
-
Usage:
- Run
ic-on extractand visit all relevant pages of your site. - The icons you use will be saved in the
buildfolder.
- Run
- Benefit: Ships only the icons you actually use, reducing your project's size.
- Purpose: Adds custom icons to your library.
-
Usage:
- Provide the image file as an argument.
- The command processes the image by removing its background and adds it to the icon registry.
- Benefit: Easily extend your icon library with custom icons.
ic-on is more than just an icon library- it's a flexible and efficient system designed for developers. Here's a deeper look at how it works:
- Built as a Custom Element,
<ic-on>requires no additional libraries or frameworks. - This enables effortless integration with virtually any front-end technology.
- To prevent repeated reinstallation,
<ic-on>spins up a local server (on port3411usingic-on serve) to host the icon registry system-wide. - The server automatically starts with your OS (configurable) for a seamless developer experience.
- It intelligently resolves the best icon file format (SVG, WebP, PNG, or JPEG) and serves the most appropriate asset.
- Instead of inserting an image,
<ic-on>applies the icon as a CSS mask (-webkit-mask), allowing it to inherit text colors and adapt to your design system effortlessly. - This ensures that icons remain crisp and consistent with your styling rules.
- Once installed, ic-on becomes a globally accessible resource across all your projects.
- This minimizes redundancy and ensures a consistent icon experience everywhere.
ic-on is designed with both developers and end-users in mind. It offers:
- Universal compatibility via Web Components.
- Rapid integration with a single script inclusion.
- Efficiency by only loading necessary icons.
-
Extensibility with
ic-onify, allowing you to grow your icon library with custom icons. -
Automatic server startup via
ic-on serve, ensuring your local icon server is always running.
Whether you're working with React, Angular, Vue, or plain HTML, ic-on
delivers a powerful, streamlined icon experience with minimal
configuration.
Let your icons speak louder than words with ic-on! 🚀