How to Customize Icons on Iconer

Updated

Iconer lets you edit icon attributes — such as stroke width, corner style, and line caps — directly in the browser before you copy or export. Open any icon library in the app, select an icon, and adjust the controls shown for that library; the preview updates immediately. The exact options depend on the library, because each one exposes only the attributes its source files support.

What you can customize

Iconer groups its libraries by the kind of source they use, and the editable attributes follow from that:

  • Stroke width — available on line-style libraries such as Feather, Tabler, Lucide, Iconoir, and Phosphor.
  • Corner and join style — round, sharp, or solid variants appear on libraries like Ionic, Heroicons, Bootstrap, Boxicons, and Teeny.
  • Line caps and joins — Bytesize exposes linecap and linejoin in addition to stroke width.
  • Style variants — some libraries ship multiple weights or fills (line, solid, sharp, round) that you switch between rather than edit numerically.

Not every control appears on every icon. A solid-only set has no stroke width to change, and a library that ships a single style won't offer a variant toggle.

Step-by-step

  1. Open a library. From the Iconer home view, pick a set — for example Feather Icons (286 icons, MIT), Tabler Icons (1,520 icons, MIT), or Material Icons (2,946 icons, Apache 2.0).
  2. Find an icon. Use search, or filter by category (Animals, Apps, Brand, Communications, Devices, Food, Graphics, People, Real World, UI) and tag. You can also filter by license and type, and sort by popularity.
  3. Select it. The icon opens in the app view, where the editable attributes for that library are listed.
  4. Adjust the attributes. Change stroke width, or toggle round/sharp/solid, depending on what the library exposes. The preview reflects each change as you make it.
  5. Copy or export. Once the icon looks right, copy it or download it in your chosen format (SVG, PNG, HTML, JSX, and others).

Expected result: you get an icon file or snippet matching the attributes you set, without editing the source by hand.

Choosing a library for the attributes you need

If you need… Look at Why
Fine control over line weight Feather, Tabler, Lucide, Iconoir Line-style sets with stroke width
Rounded vs. sharp corners Ionic, Heroicons, Boxicons, Teeny Expose round/sharp/solid variants
Cap and join control Bytesize Adds linecap and linejoin
A large set to search within Material (2,946), Iconpark (2,437), Remix (2,213) More icons to filter before customizing
Permissive licensing MIT sets (most listed), or Unlicense (Systemui) Fewer attribution constraints

Licenses vary across the catalog: most libraries are MIT, Iconpark/Material/Remix are Apache 2.0, Basil is CC BY 4.0, Lucide is ISC, and Systemui is Unlicense. Check the license shown on the library before you ship an icon, since the terms differ.

Common snags

  • A control you expected isn't there. The attribute isn't part of that library's source. Switch to a library that exposes it, or accept the fixed style.
  • The icon looks different after export. Some formats rasterize at a fixed size; export SVG or JSX if you need the edited attributes preserved as vectors.
  • You can't find a matching icon. Widen the search by clearing tag filters, or try a larger set like Material or Iconpark.

Iconer's customization is attribute-level editing on top of existing libraries, not a from-scratch drawing tool — so the fastest path is usually to pick the library whose editable attributes already match the look you want, then fine-tune from there.