معرفی Heroicons؛ مجموعه آیکون‌های SVG رایگان و حرفه‌ای

پیدا کردن آیکون‌های یکدست، زیبا و متناسب با استانداردهای مدرن طراحی وب همیشه یکی از دغدغه‌های اصلی طراحان و توسعه‌دهندگان فرانت‌اند بوده است. اگر شما هم به دنبال یک منبع مطمئن، رایگان و باکیفیت برای پروژه‌های خود هستید، مجموعه Heroicons پاسخی دقیق به نیاز شماست. این ابزار توسط تیم سازنده فریم‌ورک معروف Tailwind CSS توسعه یافته و مجموعه‌ای بی‌نظیر از آیکون‌های دست‌ساز را در اختیار شما می‌گذارد.

همان‌طور که در طراحی رابط کاربری و توسعه نرم‌افزار به ابزارهای بهینه‌ای مثل پک گرافیکی پیکسلی رایگان برای بازی‌سازها نیاز داریم، داشتن یک مجموعه آیکون استاندارد نیز سرعت پیاده‌سازی پروژه‌ها را به شکل چشمگیری افزایش می‌دهد. در این مقاله قصد داریم به بررسی دقیق این مجموعه، نحوه استفاده از آن و نکات فنی مربوط به آن بپردازیم.

آشنایی با ساختار و ویژگی‌های Heroicons

مجموعه Heroicons شامل صدها آیکون کاربردی است که به صورت تخصصی برای استفاده در وب‌سایت‌ها و اپلیکیشن‌ها طراحی شده‌اند. تمام آیکون‌های این مجموعه به شکل فایل‌های برداری SVG عرضه می‌شوند که به شما اجازه می‌دهد بدون افت کیفیت، اندازه آن‌ها را به دلخواه تغییر دهید. این آیکون‌ها در دسته‌بندی‌های مختلفی مثل ناوبرها، دکمه‌های کنترلی، ابزارهای ویرایش متن و آیکون‌های عمومی سیستم ارائه شده‌اند.

از جمله نمونه‌های موجود در این مجموعه می‌توان به موارد زیر اشاره کرد:

• آیکون‌های حرکتی و فلش‌ها (مثل arrow-down، arrow-left، arrows-right-left)
• آیکون‌های مربوط به مدیریت فایل و پوشه (مثل archive-box، document، folder)
• آیکون‌های ارتباطی و رسانه (مثل chat-bubble-left، phone، video-camera)
• آیکون‌های رابط کاربری عمومی (مثل cog، home، user، magnifying-glass)

لایسنس و شرایط استفاده رایگان

یکی از مهم‌ترین دغدغه‌ها در انتخاب منابع طراحی، حقوق نشر و مجوزهای استفاده است. مجموعه Heroicons تحت لایسنس معتبر MIT منتشر شده است. این یعنی شما می‌توانید از این آیکون‌ها به صورت کاملاً رایگان در پروژه‌های شخصی، تجاری، متن‌باز و حتی پروژه‌های تجاری بسته‌بندی شده استفاده کنید. هیچ محدودیتی برای تغییر دادن شکل ظاهری یا رنگ آیکون‌ها وجود ندارد و نیازی به ذکر منبع اجباری نیست، هرچند قدردانی از سازندگان همواره پسندیده است.

نحوه استفاده از آیکون‌ها در پروژه‌های وب

برای استفاده از این آیکون‌ها روش‌های مختلفی وجود دارد. شما می‌توانید مستقیماً کد SVG هر آیکون را کپی کرده و در سند HTML خود قرار دهید یا از آن‌ها به عنوان کامپوننت در فریم‌ورک‌هایی مثل ری‌اکت (React) و ویو (Vue) بهره ببرید. در ادامه یک نمونه کد ساده از استفاده مستقیم کد SVG یک آیکون را مشاهده می‌کنید که می‌توانید آن را به راحتی استایل‌دهی کنید.

<!-- نمونه استفاده از یک آیکون سرچ (magnifying-glass) با کدهای SVG -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>

در قطعه کد بالا، تگ <svg> وظیفه نمایش گرافیک برداری را بر عهده دارد و تگ <path> مسیرهای ترسیم خطوط آیکون را رسم می‌کند. شما می‌توانید با استفاده از ویژگی‌های CSS مثل stroke رنگ آیکون و با w-6 h-6 (یا کلاس‌های ابعادی دیگر) اندازه آن را به دلخواه کنترل کنید.

دسته‌بندی‌های ظاهری آیکون‌ها

آیکون‌های این مجموعه به طور کلی در دو استایل اصلی عرضه می‌شوند تا طراحان بتوانند بر اساس نیاز بصری رابط کاربری خود دست به انتخاب بزنند:

• Outline: آیکون‌های توخالی با ضخامت خطوط استاندارد و یکنواخت (Stroke-based) که ظاهری مدرن و مینیمال به رابط کاربری می‌دهند.
• Solid: آیکون‌های توپر و پررنگ که برای حالت‌های فعال (Active) یا دکمه‌های برجسته کاربرد بسیار خوبی دارند.

همچنین مشابه این دقت در ساختاردهی ابزارها را می‌توان در سایر بخش‌های توسعه وب و مدیریت منابع مشاهده کرد؛ درست همان‌طور که در مدیریت فایل‌ها با روش P.A.R.A به نظم دیجیتال می‌رسیم، دسته‌بندی منظم این آیکون‌ها نیز از به هم ریختگی طراحی جلوگیری می‌کند.

پرسش‌های متداول

جمع‌بندی

مجموعه Heroicons یک منبع کامل، استاندارد و همیشه در دسترس برای طراحان وب و برنامه‌نویسان فرانت‌اند است. عدم وجود پیچیدگی در دریافت فایل‌ها، هماهنگی کامل با فریم‌ورک‌های مدرن و داشتن لایسنس آزاد MIT باعث شده است تا این ابزار به یکی از گزینه‌های اصلی در جعبه‌ابزار هر طراح دیجیتالی تبدیل شود. اگر به دنبال ارتقای کیفیت بصری پروژه‌های خود هستید، همین حالا می‌توانید به وب‌سایت رسمی این مجموعه سر بزنید.

ورود به سایت رسمی