آیکن‌ها
وضعیت: در حال بازبینی
آیکن‌های هارمونیک از مجموعهٔ IBM Carbon انتخاب می‌شوند و هیچ آیکن دیگری، از مجموعه‌های دیگر یا طراحی‌شده برای یک پروژه، به کار نمی‌رود.
کتابخانهٔ آیکنهمهٔ آیکن‌ها با جست‌وجو، دسته‌بندی و دانلود SVG به رنگ‌های برند.
- سبک خطی (outline) روی گرید ۳۲ پیکسلی، با ضخامت خط همان‌طور که طراحی شده است. آیکن‌های پرشده فقط برای وضعیت (در اعلان و پیام خطا).
- رنگ:
accentروی زمینهٔ روشن،brandروی زمینهٔ تیره، وblackفقط برای چاپ و سندهای تک‌رنگ. در کامپوننت‌ها آیکن رنگ متن کنارش را می‌گیرد. - یک آیکن برای هر ایده؛ در کارت، بالا و سمت راست.
- بدون ایموجی، بدون مجموعه‌های توپر یا سه‌بعدی، و بدون آیکن تزیینی.
اندازه‌ها
Section titled “اندازه‌ها”| اندازه | کاربرد |
|---|---|
| ۱۶ پیکسل | کنار متن کوچک، در برچسب و پیام خطا |
| ۲۰ پیکسل | داخل دکمه، فیلد و اعلان |
| ۲۴ پیکسل | ناوبری و نوارابزار |
| ۳۲ پیکسل | کارت‌ها و اسلایدها |
همهٔ آیکن‌ها 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روی دکمه.