About iconice

An SVG-approach

Icons are everywhere, yet how they’re displayed varies greatly. Some websites use icon fonts, which offer advantages like:

  • Responsive sizing
    Icons adjust based on font-size rather than fixed width/height.
  • Contextual coloring
    Icons inherit color from text, making use of the color property rather than fill.

However, icon fonts come with significant drawbacks:

  • Accessibility concerns
  • Limited to solid colors
  • Treated as a font typeface
  • No support for stroke
  • Potential for visual lag (flash paint)

Iconice empowers you to build websites with best practices while retaining the benefits of icon fonts.


A two-step process

Iconice streamlines your icon management workflow. Simply upload your SVG files to your workspace, where you can add or delete icons as needed.

Step one: Upload your SVGs

Each file goes through a transformation layer that:

Minimizes the file Cleans unnecessary elements Converts fills & strokes to CSS variables

When your icons are ready you can download them with a single click.

Step two: Integrate into your website

When downloading your icons you are also treated with a Iconice-component, allowing for easy integration into your website. You can plug and play this component as-is or use it as a template to customize your icon rendering.

Whether you're using React or Svelte, we got you covered!

About Examples Plans Workspaces
Sign in