Incomex AI Portal
KB-711C rev 4

Incomex Hand-Draw Icon Standard

11 min read Revision 4
iconshand-drawbrushstrokepainterlylawstandardwebp-only-webpng-doc-onlyhuman-facingvisual-matrixlarge-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.

Base WebP URL:

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

For human readability, the visual matrix below uses enlarged WebP previews from:

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

Visual Icon Matrix

Icon Name Meaning Recommended use case WebP URL / CSS class
megaphone megaphone Sales, announcements, marketing, broadcasting a message Sales module, campaign notice, public announcement webp/megaphone.webp / .bi-megaphone
recruitment recruitment Recruitment, admissions, candidate search, talent sourcing Hiring flow, admissions pipeline, candidate lookup webp/recruitment.webp / .bi-recruitment
org-chart org-chart Human resources, administration, hierarchy, team structure Org chart, HR dashboard, team structure webp/org-chart.webp / .bi-org-chart
calculator calculator Finance, accounting, budgeting, calculations Finance module, budget review, accounting task webp/calculator.webp / .bi-calculator
archive archive Administration, records, file storage, document management Records, archive, file storage, admin documents webp/archive.webp / .bi-archive
training training Training, learning, education, onboarding Training pages, onboarding flows, learning content webp/training.webp / .bi-training
server server Servers, databases, backend infrastructure, IT systems Backend, infrastructure, database, hosting webp/server.webp / .bi-server
robot robot AI, automation, bots, machine intelligence AI assistant, automation flow, bot task webp/robot.webp / .bi-robot
code code Software development, programming, engineering Developer tools, code tasks, technical work webp/code.webp / .bi-code
edit edit Edit, write, compose, modify content Edit button, writing action, content change webp/edit.webp / .bi-edit
delete delete Delete, remove, cancel, reject, close Delete action, reject state, remove item webp/delete.webp / .bi-delete
save save Save, confirm, approve, success, done Save action, approval, confirmation webp/save.webp / .bi-save
warning warning Warning, alert, caution, important notice Risk alert, caution state, important note webp/warning.webp / .bi-warning
settings settings Settings, configuration, preferences, controls Configuration screen, preferences, controls webp/settings.webp / .bi-settings
search search Search, find, lookup, explore Search action, lookup, exploration webp/search.webp / .bi-search
cart cart Shopping cart, checkout, e-commerce, basket Cart, checkout, purchasing flow webp/cart.webp / .bi-cart
talk talk Talk, chat, comment, conversation, message Chat, comment, discussion, support message webp/talk.webp / .bi-talk
users users Users, group, team, community, audience Team list, user group, community webp/users.webp / .bi-users
profile profile Profile, account, person, avatar, user User profile, account page, person card webp/profile.webp / .bi-profile
smile smile Smile, happy, friendly, positive reaction Friendly tone, positive feedback, reaction webp/smile.webp / .bi-smile
grin grin Grin, laughing, excited, delighted reaction Excitement, delight, lighthearted reaction webp/grin.webp / .bi-grin
tears-of-joy tears-of-joy Tears of joy, laughing hard, funny reaction Fun reaction, light humor, celebration note webp/tears-of-joy.webp / .bi-tears-of-joy
applause applause Applause, celebrate, achievement, favorite, star Achievement, reward, praise, milestone webp/applause.webp / .bi-applause
improve improve Improvement, optimize, upgrade, kaizen Improvement proposal, optimization, upgrade webp/improve.webp / .bi-improve
brainstorm brainstorm Brainstorm, idea, innovation, creative thinking Idea capture, workshop, innovation prompt webp/brainstorm.webp / .bi-brainstorm
growth growth Growth, development, progress, scaling up Growth metric, progress, development webp/growth.webp / .bi-growth
target target Target, goal, objective, aim, focus Goal, KPI, objective, strategic focus webp/target.webp / .bi-target

Detailed List

  • megaphone → Sales, announcements, marketing → use for sales module, campaign notice, public announcement.
  • recruitment → Recruitment and candidate search → use for hiring/admissions pipelines.
  • org-chart → HR hierarchy and team structure → use for people/org views.
  • calculator → Finance and accounting → use for budget, invoice, calculation tasks.
  • archive → Records and file storage → use for document management.
  • training → Learning and onboarding → use for training pages and courses.
  • server → Backend infrastructure → use for databases, servers, hosting.
  • robot → AI and automation → use for bots, AI assistants, automated actions.
  • code → Software development → use for engineering and technical tasks.
  • edit → Editing and writing → use for edit/compose actions.
  • delete → Remove, reject, close → use for delete/cancel actions.
  • save → Save, confirm, approve → use for confirmation and completion.
  • warning → Alert and caution → use for risk and important notices.
  • settings → Configuration → use for preferences and controls.
  • search → Find and lookup → use for search/explore actions.
  • cart → Shopping or checkout → use for e-commerce or order flows.
  • talk → Chat and comments → use for messages and discussions.
  • users → Team and group → use for user groups and communities.
  • profile → Person/account → use for user profile and avatar contexts.
  • smile → Positive reaction → use for friendly feedback.
  • grin → Excited reaction → use for delighted feedback.
  • tears-of-joy → Funny reaction → use sparingly for lighthearted moments.
  • applause → Celebration → use for achievement and praise.
  • improve → Improvement → use for optimization and upgrade proposals.
  • brainstorm → Ideas → use for ideation and creative work.
  • growth → Progress → use for growth and development.
  • target → Goal → use for objective, KPI, and focus.

Do / Don't

Do

  • Use WebP for every web surface.
  • Use markdown image syntax with WebP when embedding icons in KB pages.
  • Use the shared CSS class when a class-based icon is easier than an image tag.
  • Use the catalog to inspect the icons 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 create a new Nuxt route, renderer, page, or component for this standard.
  • Do not recolor or flatten the artwork into geometric vector icons.