Introducing ic0n.dev: Powered by react-icons

Read time: 3 minutes
Mitchell Christ
Mitchell Christ

In the world of web development, icons play a crucial role in creating intuitive and visually appealing designs and UIs. The react-icons library has long been a go-to resource for developers—including myself—offering a vast collection of beautiful icons from various popular icon sets.

Today, I'm excited to share a personal project that builds upon this fantastic resource, providing a new way to leverage these icons in your web projects.

Introducing: ic0n.dev!

Powered by the incredible work of the react-icons package, there's a new easy way to serve the extensive icon collections as plain URLs for use with <img> tags. This approach works hand-in-hand with the original react-icons library, offering developers more flexibility in how they implement icons in their projects.

Instead of importing icons through the react-icons library, you can now display them using a straightforward URL (no import necessary!):

    • <!-- basic usage -->
<img src="https://ic0n.dev/md/MdContentCopy" alt="" />

<!-- fill color -->
<img src="https://ic0n.dev/fa/FaShopify?hex=95BF47" alt="" />

<!-- bigger! -->
<img
  src="https://ic0n.dev/md/MdOutlineRamenDining?fill=orangered"
  width="120" height="120"
  alt="car"
/>

    Which yields:

    car

    For more advanced use cases with CSS:

    *Check out the official site for more examples and documentation.

    • /* ::marker */
ul {
  list-style: none;

  & li {
    padding-left: 0.5em;

    &::marker {
      content: url('https://ic0n.dev/fa6/FaCheck?hex=f00');
    }
  }
}

/* mask-image */
figure {
  mask: url(https://ic0n.dev/si/SiYoutube) center/cover;
}

    This method is not meant to replace react-icons, but rather to complement it. It provides an alternative approach that can be particularly useful in certain scenarios, such as:

    1. Quick prototyping.
    2. Projects where you want to minimize bundle size.
    3. Non-React environments (Svelte, Vue, etc.) where you still want access to the react-icons collection.
    4. Situations where you need to dynamically change icons without re-importing.

    To use an icon, simply follow the URL pattern:

    • https://ic0n.dev/<library>/<icon>?[hex,fill]=<color>
    1. The ic0n.dev domain
    2. Icon library (2-3 letter code found on react-icons)
    3. Icon name
    4. [Optional] Hex (hex code without the hash "#") or Fill (CSS color value) parameter

    How It Works

    The service acts as a bridge between the react-icons library and a simple image URL. When you use the URL format, it fetches the appropriate icon from the react-icons collection and serves it as an SVG image. This means you get all the benefits of vector graphics - scalability, small file size, and high quality at any resolution.

    Accessing the Entire react-icons Collection

    Just like with the original react-icons library, you have access to all the icon sets available, including:

    • Font Awesome (fa)
    • Material Design Icons (md)
    • Visual Studio Code Icons (vsc)
    • Lucide Icons (lu)
    • Radix Icons (rx)
    • ...and many more!

    Performance Considerations

    While this method provides great flexibility, it's worth noting that it does involve a network request for each icon. For applications where performance is critical and you're using a large number of icons, the traditional react-icons import method might still be preferable. However, for many use cases, the performance difference will be negligible, and the benefits of simplicity and flexibility may outweigh any minor performance considerations.

    Acknowledgements

    This project obviously wouldn't be possible without the amazing work of the react-icons team and community. It's built to complement their library and provide developers with another convenient way to use these beautiful icons in their projects.

    Inside SanityPress

    As of v6.3.6, SanityPress comes built with a new icon schema object to help with uploading icons. The custom input component displays a list of compatible icon library presets, thanks to the newly added TextInputWithPresets component:

    Get started!

    Check out the project on GitHub—and give it a ⭐ star please!—to stay updated on any new features or improvements.

    Whether you're a seasoned developer or just starting out, this tool provides an easy way to enhance your projects with beautiful, scalable icons. Give it a try in your next project and experience the simplicity and flexibility ic0n.dev offers!

    Check out some of my other projects, too: