Icons Creator documentation

How processing works

After an image is selected, the browser reads the file and keeps the source in memory. Size, border, background, style and animation settings are applied before the preview is generated.

The conversion stage is loaded on demand. This keeps image-processing code out of the first page load when a visitor only wants to read a guide.

• File selection starts on the visitor device.
• Preview updates as settings change.
• Export only runs after an explicit user action.
• SVG, PNG and ICO use different generation paths to preserve their expected formats.

Recommended icon workflow

Start with a square, high-resolution source. For small symbols, remove unnecessary details before trying to compensate with effects.

Always inspect the result near its final size. A design that looks excellent at 512 pixels can lose its meaning at 16 or 32 pixels.

• Use a source of at least 512 × 512 pixels when possible.
• Keep enough contrast between symbol and background.
• Test rounded corners before exporting a final version.
• Check the result on a small screen and in dark mode.

Formats and when to use them

SVG is a strong choice for vector interface icons because it scales without pixelation and can integrate with CSS. PNG is appropriate when raster pixels must be preserved. ICO is especially useful for favicons that need multiple resolutions in one file.

A project can use more than one format: SVG for UI, PNG for raster artwork and ICO plus PNG for favicons.

• Interface components: SVG.
• Raster image with transparency: PNG.
• Multi-resolution favicon: ICO plus PNG.

How to publish a favicon

For a traditional website, publish favicon.ico and PNG versions. Modern browsers also support SVG, while ICO remains a useful fallback for varied environments.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Integrating the result into frameworks

The exported file can be used as a static asset in Vue, React, Angular or Svelte. For larger libraries, keep names predictable and import only the icons each screen needs.

src/assets/icons/
├── search.svg
├── settings.svg
└── user.svg

• Vue: import the asset in a component or use a public static path.
• React: import SVG assets according to the project bundler.
• Angular: keep public assets in the directory configured by the project.
• Svelte: use static imports so the bundler resolves the path.

Performance and accessibility

Decorative icons should not compete with primary content. When an icon communicates an action by itself, provide an accessible name on its containing control. When it is decorative, avoid creating a redundant announcement for assistive technologies.

Heavy features such as image processing and export can be delayed until needed. For static assets, predictable dimensions and coherent caching help prevent layout shifts.

Pre-publish checklist

Use this sequence to validate an icon before production.

• The symbol remains recognizable at its smallest target size.
• Background and transparency work in light and dark themes.
• The chosen format matches the final use.
• The file opens correctly and returns the expected MIME type.
• The filename is stable and contains no problematic characters.
• The action using the icon has an accessible name when needed.