Incomex AI Portal
KB-711C rev 5

Incomex Hand-Draw Icon Standard

10 min read Revision 5
iconshand-drawbrushstrokepainterlylawstandardwebp-only-webcolor-variantslarge-icons

Incomex Hand-Draw Icon Standard

This is the official human-facing visual standard for Incomex hand-drawn / brushstroke icons.

Use this standard when the work asks for a soft, organic, painterly, non-industrial visual style. The old industrial / geometric icon set has been removed and must not be used.

Rule Summary

  • WebP is the only approved icon format for web.
  • Web must not use PNG. Do not use PNG in HTML, CSS, markdown image embeds, <picture> fallback, or image-set() fallback for web surfaces.
  • Transparent PNG is only for internal non-web documents: Word, Lark, slides, and offline documents.
  • SVG files in this library are wrappers around raster artwork. For web, use WebP.
  • *-color.webp variants are approved alternate choices for the same icon name.

Current Library

  • Icon groups: 30
  • WebP variants: 43
  • Preview size in catalog: 88px cards using 384x384 webp-3x assets.

Base WebP URL:

https://vps.incomexsaigoncorp.vn/ui-preview/assets/icons/hand-draw/webp/

Large preview URL:

https://vps.incomexsaigoncorp.vn/ui-preview/assets/icons/hand-draw/webp-3x/

Visual Icon Matrix

Base Color Variant Name Meaning WebP choices
megaphone megaphone Sales, announcements, marketing, broadcasting a message webp/megaphone.webp
recruitment recruitment Recruitment and admissions - searching a candidate's profile / talent sourcing webp/recruitment.webp
org-chart org-chart Human resources & administration - organizational hierarchy and talent review webp/org-chart.webp
calculator calculator Finance, accounting, budgeting, calculations webp/calculator.webp
archive archive Administration, records, file storage, document management webp/archive.webp
training training Training, learning, education, study webp/training.webp
server server Servers, databases, backend infrastructure, IT systems webp/server.webp
robot robot-color robot AI, automation, bots, machine intelligence webp/robot.webp / webp/robot-color.webp
code code Software development, programming, engineering webp/code.webp
edit edit-color edit Edit, write, compose, modify content webp/edit.webp / webp/edit-color.webp
delete delete Delete, remove, cancel, reject, close webp/delete.webp
save save Save, confirm, approve, success, done webp/save.webp
warning warning Warning, alert, important, caution webp/warning.webp
settings settings-color settings Settings, configuration, preferences, controls webp/settings.webp / webp/settings-color.webp
search search Search, find, look up, explore webp/search.webp
cart cart Shopping cart, checkout, e-commerce, basket webp/cart.webp
talk talk-color talk Talk, chat, comment, conversation, message webp/talk.webp / webp/talk-color.webp
users users-color users Users, group, team, community, audience webp/users.webp / webp/users-color.webp
profile profile Profile, account, person, avatar, user webp/profile.webp
smile smile-color smile Smile, happy, friendly, positive webp/smile.webp / webp/smile-color.webp
grin grin-color grin Grin, laughing, excited, delighted webp/grin.webp / webp/grin-color.webp
tears-of-joy tears-of-joy-color tears-of-joy Tears of joy, laughing hard, hilarious webp/tears-of-joy.webp / webp/tears-of-joy-color.webp
applause applause-color applause Applause, celebrate, achievement, favorite, star webp/applause.webp / webp/applause-color.webp
improve improve-color improve Improvement, optimize, upgrade, kaizen webp/improve.webp / webp/improve-color.webp
brainstorm brainstorm-color brainstorm Brainstorm, idea, innovation, contribute ideas webp/brainstorm.webp / webp/brainstorm-color.webp
growth growth-color growth Growth, development, progress, scaling up webp/growth.webp / webp/growth-color.webp
target target-color target Target, goal, objective, aim, focus webp/target.webp / webp/target-color.webp
idea-color idea Idea, insight, inspiration, lightbulb webp/idea-color.webp
sales-color sales Sales, shopping, revenue, commerce webp/sales-color.webp
print-color print Print, printer, document output webp/print-color.webp

Do / Don't

Do

  • Use WebP for every web surface.
  • Use the catalog to inspect base and color variants before choosing one.
  • Use transparent PNG only for non-web internal documents.
  • Prefer this library for hand-drawn, brushstroke, painterly, soft, organic UI.

Don't

  • Do not use PNG on web.
  • Do not add PNG fallback for web.
  • Do not restore or use the removed industrial / geometric icon set.
  • Do not recolor or flatten the artwork into geometric vector icons.