Why Stock Icons Are a Brand Compromise
Icon libraries — Heroicons, Feather, Font Awesome, Phosphor — solve a real problem: they provide immediately usable, visually consistent iconography without any design investment. For stores where navigation is a functional component rather than a brand expression component, stock icons are a perfectly appropriate choice. But for stores whose brand identity is built around a distinctive visual language — a particular illustration style, a hand-crafted aesthetic, a whimsical or vintage character — using stock icons in navigation communicates a quiet discontinuity: the product photography, the packaging, the brand story all express one personality, and then the navigation uses icons that could belong to any store on the internet.
Illustrated navigation replaces this discontinuity with brand coherence. When navigation icons are drawn in the same hand as the brand's product illustrations, the menu becomes an extension of the brand's creative world rather than a functional layer imposed on top of it. The visitor who arrives attracted to the brand's visual personality encounters that personality throughout the shopping experience — in the product imagery, in the homepage design, and also in the small icons that mark navigation categories as they browse on mobile. This consistency is not a luxury detail; it's one of the signals that distinguishes brands with developed identities from stores that assembled a design system without a unifying hand.
"Our brand is built around a loose, hand-drawn botanical illustration style — all our packaging has that look. When we switched from Heroicons in our Tab Bar to custom icons our illustrator drew specifically for navigation — a small hand-sketched plant for 'Garden,' a loose ink cup for 'Kitchen,' a tiny drawn bee for our 'Honey & Preserves' category — visitors started mentioning the navigation in reviews. Not 'I liked the navigation'; more 'the whole site feels handmade and intentional.' That's what illustrated navigation does for a brand like ours. It makes the interface part of the brand, not just scaffolding around it."
— A Navi+ customer, artisan food and garden brand
When Illustrated Navigation Is the Right Choice
Illustrated navigation adds the most value when several conditions align:
The brand already has an illustration style. Custom navigation icons work best as an extension of an existing visual language. If the brand uses illustrations in product photography, packaging, email marketing, or social content, navigation icons drawn in the same style create coherence. If the brand doesn't have an established illustration style, developing one specifically for navigation is the wrong order of operations — establish the brand illustration language first, then extend it to navigation.
The product category suits visual expression. Some product categories have natural illustration potential: food and beverage, plants and gardening, crafts and stationery, children's products, lifestyle and wellness. For these categories, illustrated navigation icons can function simultaneously as navigation signposts and as mini-expressions of the product world — a drawn espresso cup that also makes the visitor think about the coffee they're about to browse. For categories where precision and professionalism are the primary brand values (professional tools, industrial supplies, medical equipment), illustrated navigation can undermine the brand's authority positioning.
The illustrations support navigation comprehension, not just aesthetics. Illustrated navigation must still function as navigation. Custom icons that are more artistically complex than functionally clear — where the style of the illustration is more prominent than what it depicts — create visual interest but undermine navigation usability. The test for any illustrated icon is: can a first-time visitor who has never seen this icon immediately understand which category it represents? Beauty that doesn't communicate is a decoration problem disguised as a navigation problem.
| Navigation Icon Approach | Best For | Brand Signal |
|---|---|---|
| Stock icon library | Functional stores, tech brands | Professional and efficient |
| Custom-styled icons (same style, original) | Brands with a design system | Polished and consistent |
| Hand-drawn illustrated icons | Artisan, lifestyle, whimsical brands | Handmade, personal, unique |
| Photographic category icons | Food, fashion, product-forward brands | Aspirational and product-focused |
Executing Illustrated Navigation Without Sacrificing Performance
The practical concern with illustrated navigation is file size: custom illustrations, if exported carelessly, can produce icon files that are significantly larger than stock SVG icons, adding to page weight and slowing the navigation load. The solution is format and optimization discipline: navigation illustrations should be exported as SVG (vector format, infinitely scalable, typically very small file sizes) rather than PNG or WebP, with all unnecessary elements (layer names, metadata, editor artifacts) stripped from the SVG code. A hand-drawn illustration that's been properly optimized as SVG typically lands at 2–8KB per icon — smaller than many stock icon libraries that include hundreds of unused icons in a single file.
Navi+'s Tab Bar accepts custom SVG icons for each navigation slot, and the Slide Menu supports custom HTML that can include illustrated headers or decorative section dividers. A set of 6–8 navigation icons for a Tab Bar or Slide Menu — properly optimized as clean SVGs — adds negligible weight to the page while transforming the navigation from a generic functional component into a branded creative element that visitors remember.
無料で試す — コード不要、開発者不要
Shopify、WordPress、またはあらゆるウェブサイトに数分でインストール。