آیکن‌ها

وضعیت: در حال بازبینی

آیکن‌های هارمونیک از مجموعهٔ IBM Carbon انتخاب می‌شوند و هیچ آیکن دیگری، از مجموعه‌های دیگر یا طراحی‌شده برای یک پروژه، به کار نمی‌رود.

کتابخانهٔ آیکنهمهٔ آیکن‌ها با جست‌وجو، دسته‌بندی و دانلود SVG به رنگ‌های برند.

قواعد

• سبک خطی (outline) روی گرید ۳۲ پیکسلی، با ضخامت خط همان‌طور که طراحی شده است. آیکن‌های پرشده فقط برای وضعیت (در اعلان و پیام خطا).
• رنگ: accent روی زمینهٔ روشن، brand روی زمینهٔ تیره، و black فقط برای چاپ و سندهای تک‌رنگ. در کامپوننت‌ها آیکن رنگ متن کنارش را می‌گیرد.
• یک آیکن برای هر ایده؛ در کارت، بالا و سمت راست.
• بدون ایموجی، بدون مجموعه‌های توپر یا سه‌بعدی، و بدون آیکن تزیینی.

اندازه‌ها

اندازه	کاربرد
۱۶ پیکسل	کنار متن کوچک، در برچسب و پیام خطا
۲۰ پیکسل	داخل دکمه، فیلد و اعلان
۲۴ پیکسل	ناوبری و نوارابزار
۳۲ پیکسل	کارت‌ها و اسلایدها

در کد

همهٔ آیکن‌ها fill="currentColor" دارند، پس به‌صورت SVG درون‌خطی رنگ متن اطرافشان را می‌گیرند:

<svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true">…</svg>

فایل‌های SVG در https://design.harmoniq.solutions/dist/icons/32/<نام>.svg هم در دسترس‌اند.

• آیکن تزیینی، یعنی آیکنی که کنار متن آمده، aria-hidden="true" می‌گیرد.
• آیکنی که به‌تنهایی معنا دارد (مثل دکمهٔ فقط‌آیکن)، برچسب دسترس‌پذیر می‌خواهد: aria-label روی دکمه.

آیکن‌های جهت‌دار

تاییدشده

قاعده و دو فهرست «قرینه می‌شوند» و «قرینه نمی‌شوند» تایید شده‌اند. موردهای «منتظر تصمیم» هنوز در هیچ دسته‌ای نیستند و تا تصمیم برند همان‌طور که هستند (بدون قرینه) به کار می‌روند.

در چیدمان راست‌به‌چپ آیکنی قرینه می‌شود که جهت خواندن یا پیشرفت را نشان می‌دهد؛ پیکانی که «بعدی» است در فارسی به چپ اشاره می‌کند. آیکنی که شیئی در جهان واقعی را نشان می‌دهد یا اسمش جهت فیزیکی است قرینه نمی‌شود.

• قرینه می‌شود: پیکان، شورون و کرت (caret) چپ و راست، اول و آخر صفحه، قبلی و بعدی، واگرد و ازنو، پاسخ، و تورفتگی متن. هر جفت در فهرست زیر به‌صورت اصلی (چپ) و قرینه (راست) نشان داده شده است.
• قرینه نمی‌شود: کنترل‌های رسانه (پخش، رد‌کردن، عقب و جلو؛ جهت نوار صوتی ثابت است)، ترازبندی متن و شکل‌ها که جهت فیزیکی را نام می‌برند، علامت‌هایی مثل تیک و ذره‌بین، و ساعت.
• منتظر تصمیم: پیکان‌های مورب مثل «باز شدن در پنجرهٔ تازه»، پنل‌های کناری، ورود و خروج، ارسال و اشتراک‌گذاری.

قرینه می‌شوند (۱۹)

• arrow--left
• arrow--right
• chevron--left
• chevron--right
• caret--left
• caret--right
• double-chevron--left
• double-chevron--right
• page--first
• page--last
• next--outline
• previous--outline
• undo
• redo
• reply
• reply--all
• text--indent
• text--indent--less
• text--indent--more

قرینه نمی‌شوند (۱۷)

• play
• play--filled
• skip--forward
• skip--back
• rewind--10
• forward--10
• text--align--left
• text--align--right
• align--horizontal-left
• align--horizontal-right
• direction--right--01
• join--left
• triangle--right--solid
• checkmark
• search
• time
• quotes

منتظر تصمیم (۱۰)

• arrow--up-right
• arrow--down-left
• launch
• login
• logout
• open-panel--left
• open-panel--right
• right-panel--open
• send
• share

در کد

در نمونه‌های کامپوننت‌ها برای هر جهت همان آیکن درست انتخاب شده است (جداکنندهٔ مسیر صفحه در فارسی chevron--left است). برای کدی که هر دو جهت را پشتیبانی می‌کند، آیکن را یک‌بار بگذارید و کلاس hq-icon--mirror بدهید؛ در dir="rtl" خودکار قرینه می‌شود:

<svg class="hq-icon hq-icon--mirror" viewBox="0 0 32 32" aria-hidden="true">…</svg>