Icon Library for Custom Labels in WooCommerce

Applies to Cmsmart Product Designer (NBDesigner) 2.17.x · Updated October 2026. Verified against the 2.17.0 changelog; today's live captures come from the Cmsmart demo store, which currently runs a 2.18.0-dev build descended from that release, and show the designer's Cliparts tab and the order-detail production timeline referenced below.

In short

  • Outcome: buyers drop a ready-made icon — recycling, allergen, care-instruction or decorative — straight onto a label or sticker design instead of emailing your team a screenshot.
  • How it works: Cmsmart Product Designer's Cliparts tab opens a searchable icon library inside the online designer, backed by your own uploaded icon sets and a shared global library organized into categories.
  • What it takes: a few minutes in Settings to confirm the library is on, your own compliance icon set uploaded once, and the per-product Clipart settings pointed at the right categories.

Why do manual clipart fixes slow down your label and sticker orders?

Cmsmart Product Designer removes the manual back-and-forth of sourcing icons for every label order: buyers search and place icons themselves, on-brand and print-ready, while your team stays out of Illustrator for routine requests.

Most small print shops and label brands run into the same handful of pains once orders move online:

  • Finding the right symbol takes longer than making the label. A staff member opens a design tool, searches a stock site or an old folder, and drops the recycling mark or allergen icon in by hand — for every variant of every SKU.
  • Icons drift out of consistency across the catalog. One sticker uses a hand-drawn gluten-free icon, another uses a stock PNG at the wrong resolution, and nobody owns the master set.
  • Buyers can't self-serve, so orders stall in email. A customer who wants to add a recycling mark to their own label has to ask, wait, and approve a proof before the order can move to production — a slow, manual loop.
  • Reprints trace back to the wrong icon or a low-resolution one. A blurry icon pasted from a screenshot looks fine on screen and fails on the press.

Cmsmart insight: in label and packaging projects, most of the back-and-forth we see isn't about the main artwork — it's a missing or wrong compliance icon (recycling code, allergen mark, care symbol) discovered after the buyer has already checked out. Giving buyers a library to pick the icon themselves, scoped to the categories you approve, removes that email loop entirely.

What would a self-serve icon library look like for your print shop?

Picture a label buyer finishing their own design end to end: Cmsmart Product Designer lets them search, drop and resize an approved icon in seconds, so the order reaches your queue already correct instead of waiting on a proof email.

Example scenario. A buyer opens a jar-label product on a food brand's store, uploads their logo, then switches to the Cliparts tab and searches "recycling" to drop in the right symbol, followed by an allergen icon from the same panel. They preview the finished design, add to cart and check out. No email, no proof round-trip — the design that reaches production already carries the icons the shop requires, in the categories the shop chose to show.

Label product page on the Cmsmart demo store with the Start and upload design button
The label product page where the buyer starts a design — the same entry point an icon library builds on.

That self-serve moment only works if the icon set on offer is the right one for the product — which is exactly what the per-product Clipart settings and category restrictions in the next section control.

How does Cmsmart's icon library for custom labels fit into the online designer?

Cmsmart's icon library for custom labels combines your own uploaded icons with a shared global clipart library, both reachable from the Cliparts tab in the online designer, so every product can show exactly the categories you choose.

The building blocks, as shipped in 2.17.x:

  • The Cliparts tab in the online designer — a dedicated panel next to Templates, Text, Photos, Elements and Layers where buyers search and drag in an icon.
  • Your own uploaded icon sets, organized into categories you create (Manager → Cliparts), so a compliance set — allergen marks, recycling codes, care symbols — sits next to any decorative clipart you keep.
  • A shared global icon library, loaded into the same panel and paged by category as the buyer scrolls, so the designer never has to pre-load everything at once.
  • A site-wide switch and a per-product setting for how much of that global library shows: a shop can turn it off entirely, or restrict an individual product's Clipart settings to specific categories only — useful when a label product should only ever offer your approved compliance set.
  • A Flaticon field in Settings for shops that want to pull in a licensed icon pack instead of starting from an empty library.
  • Output that matches what was placed — Settings → Output carries the print file's bleed, color profile and font options through to the PDF, so an icon placed in the designer prints at the size and position the buyer chose.
Icon library for custom labels: the Cmsmart online designer open on the Templates panel, with the Cliparts tab visible in the left-hand rail
The designer's left rail — Templates, Text, Cliparts, Photos, Elements, Layers — shown here on the Templates panel; Cliparts is where the icon library described above opens.

Color accuracy matters as much as the icon itself: a recycling mark or allergen symbol that shifts color on press can be as unreadable as a missing one, which is why print-ready output follows the ICC color profile standard the rest of the print industry uses for proofing and separations.

Manual icon sourcing vs. the Cmsmart icon library
StepManual workflowCmsmart Product Designer
Finding the right iconStaff searches a stock site or an old folder per orderBuyer searches the Cliparts tab themselves, scoped to your categories
Keeping icons consistent across SKUsDepends on whoever placed it lastOne shared category set, reused by every product you allow
Compliance icons (allergen, recycling, care)Pasted in by hand, easy to miss a variantUploaded once to a restricted category, always on offer where you choose
Getting a print-ready fileRe-exported by hand, bleed and color checked manuallyOutput settings (bleed, color profile, fonts) carried straight to the PDF

What's the business value of a built-in icon library?

Cmsmart's icon library turns icon placement from a staff task into a buyer self-service step, which shows up directly in less proofing email, fewer reprints tied to the wrong icon, and faster time from "add to cart" to a production-ready file.

Where the value shows up
BenefitHow it shows up in your businessKPI to track
Less staff time per orderBuyers place their own icons instead of a designer doing it after the factMinutes of manual design work per order
Fewer reprintsThe icon that was approved is the icon that prints, at the resolution it was placedReprint rate tied to artwork issues
Faster order-to-production timeNo email proof loop waiting on a compliance iconTime from checkout to "ready for production"
Consistent brand and compliance iconsOne category set reused across every label SKUNumber of icon variants in active use per product line

Rough-cut ROI worksheet (use your own numbers): time saved per month ≈ (label and sticker orders that currently need a manual icon fix) × (minutes your team spends finding and placing that icon) − (seconds a buyer spends picking it from the library). Add any reprints avoided × your cost per reprint, and you have a shop-specific case for turning the library on.

How do you set up the icon library for a label or sticker store?

Setting up Cmsmart's icon library takes a short Settings pass plus a per-product check: confirm the plugin and the global library are on, upload your own compliance icon set, then restrict each label product's Clipart settings to the categories it should offer.

  1. Confirm Cmsmart Product Designer (NBDesigner) is active and check its version on the WordPress Plugins screen.
  2. Open Settings → General and set your default output DPI and dimensions unit for new products.
  3. Open Settings → Libraries and confirm the global clipart library is enabled (or turn it off if you only want your own categories).
  4. If your own library is empty, add your Flaticon API key from the same area so licensed icon packs fill the gap instead of starting from zero.
  5. Go to Manager → Cliparts and create categories for your compliance icons — recycling codes, allergen marks, care instructions — separate from any decorative clipart you keep.
  6. Upload your compliance icon set into those categories; move any icon that lands in the wrong one with the category picker on its card, no need to delete and re-upload.
  7. Open each label or sticker product's configuration and, in its Clipart settings, restrict the panel to the categories that product should show.
  8. Check Settings → Output: bleed, color profile and the fonts list that travel into the print-ready PDF.
  9. Test the buyer flow yourself: open the product, start a design, switch to the Cliparts tab, place an icon, and run Process to confirm it lands in "Your artwork."
  10. In wp-admin, open the resulting order and confirm the print-ready PDF regenerates with the icon in place before you mark the order for production.
Cmsmart Product Designer (NBDesigner) active on the WordPress Plugins screen with its version number
Step 1: confirm the plugin is active and note its version before changing any library settings.
Saved label design shown as Your artwork next to Add to cart
After Process, the saved design — icons included — shows as "Your artwork" on the product page.
Print-ready PDF status for a label order, rendered by the cloud renderer
The print-ready PDF for the order, rendered to the product's real size and margins — the icon prints where it was placed.
Order dashboard showing the production timeline and the design file's check status
The order dashboard: production timeline, the line item's design file, and a Download print PDF shortcut.

For the deeper walkthrough of organizing cliparts, fonts and backgrounds across your whole catalog — not just labels — see our guide on bringing designs alive with cliparts. For product-by-product canvas and pricing setup, see configuring individual product settings in NBDesigner. General WooCommerce product configuration follows the platform's own WooCommerce documentation.

Going further: what can Cmsmart build on top of your icon library?

Beyond the built-in Cliparts tab, Cmsmart builds custom development on top of the icon library for stores with regulatory or multi-market needs — required-icon checks, region-specific icon sets and bulk rollouts across a catalog.

  • Required-icon validation at checkout. The core library lets a buyer pick an icon; it does not know that a food label legally needs an allergen mark before checkout. Cmsmart builds that rule as custom development, blocking Add to cart until the required icon category is present on the design.
  • Region-specific compliance sets. A brand selling into both the US and EU needs different allergen and recycling icon sets depending on the buyer's market. Cmsmart builds category rules tied to product or shipping destination so the right set shows automatically.
  • Bulk icon rollout across hundreds of SKUs. Restricting Clipart settings product by product does not scale past a handful of items. Cmsmart builds bulk category assignment and import tooling so a new compliance icon reaches every affected product in one pass.
  • Preflight checks tuned to compliance icons. AI preflight already flags low-resolution uploads before an order reaches production; Cmsmart extends that check, as custom development, to flag a design missing a required icon category.

Delivery follows the same path for any of these: discovery, solution design, build in sprints, QA, launch and ongoing support — the same model behind Cmsmart's ecommerce project delivery, and the same team behind the product designer customization service.

Get a custom icon-library quote

Why work with Cmsmart on your label and sticker store?

Cmsmart has built WooCommerce product customization since 2012, backs the icon library and the rest of Cmsmart Product Designer with ongoing support, and can extend it with custom development when a label business needs more than the standard panel.

Cmsmart is a Netbase JSC division running web-to-print and product customization projects since 2012, with 6,300+ client projects delivered and a Trustpilot rating of 4.2 from 404 reviews. Buyers running sticker and label storefronts on Cmsmart's own Product Designer (NBDesigner) plugin have said as much directly:

"I bought the WP Printstore to make a webshop where customers can design their own stickers/decals. The support team from CMSMART is very adequate, responds quickly." — Fritz, verified Trustpilot review

Frequently asked questions

Does the icon library replace my own clipart uploads?

No — it adds to them. Your own uploaded icons and the shared global library both show in the same Cliparts tab, organized by category, and you choose per product how much of the global library (if any) is visible.

Can I stop customers from using icons outside my compliance set?

Yes, for the categories you control. Restrict a product's Clipart settings to only the categories you approve, such as your allergen and recycling icon set, instead of leaving the whole library open.

Do the icons print at the resolution a buyer sees on screen?

The print-ready PDF is rendered from the same design data the buyer placed, using the bleed, color profile and size settings configured in Settings → Output, so the icon prints at the size and position it was placed at.

What if my own icon library is empty when I start?

The Cliparts panel nudges you to add a Flaticon API key in Settings so you can pull in a licensed icon pack instead of uploading one compliance icon at a time.

Does Cmsmart check that a required icon, like an allergen mark, is actually on the design?

Not in the core plugin — the built-in library lets a buyer choose an icon but does not enforce which one. That rule-based check (is a required allergen or recycling icon present before checkout) is something Cmsmart builds as custom development for food, cosmetics and other regulated label businesses.

Where do the allergen and recycling icon rules themselves come from?

From your regulator, not from the plugin. Which allergens need a warning mark and which recycling symbol applies to your packaging are legal questions for your market — for recycling, the EPA's recycling guidance covers the familiar chasing-arrows symbol. The icon library just makes the approved marks easy to place once you know which ones you need.