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!