9 آیکون پک رایگان برای طراحان وب
سلام خدمت همراهان همیشگی لرن سایت
استفاده از آیکون ها یکی از سریعترین و راحت ترین راههای افزایش جذابیت طرح شماست . استفاده از آیکون های مناسب میتواند شفافیت را به وبسایت شما ببخشد . با استفاده از آیکون ها به سادگی میتوان به کاربرها نشان داد که هر لینک یا دکمه در صفحه چه عملی را انجام میدهد .
در این مقاله ما 9 عدد از بهترین و قابل اعتماد ترین آیکون پک ها رو به شما پیشنهاد میدهیم . این آیکون ها را به سه دسته آیکون فونتها , SVG ها و Css آیکون ها تقسیمبندی کردیم . قبل از معرفی این بسته ها به معنی هرکدام از این دسته ها میپردازیم .
آیکون فونتها :
آیکون فونتها بسیار عالی عمل میکنند خصوصا زمانی که با حجم زیاد و قالب سادهای از آیکون ها رو به رو اید . تکرنگ هستند و برای اشکال ساده بسیار مناسب اند . مرورگر با آیکون فونتها همانند متن رفتار میکند و در بیشتر مرورگر ها نیز پشتیبانی میشوند .
SVG آیکون ها :
مخفف Scalable Vector Graphic که یک فرمت گرافیکی مبتنی بر XML است که میتواند در هر مقیاسی تغیر اندازه دهد بدون آنکه از شفافیت تصویر کاسته شود . میتواند از طریق CSS , برچسب Object , برچسب Img و یا مستقیماً در HTML استفاده شود . Svg ها در مرورگر های امروزی پشتیبانی میشود اما در نسخه های پایین مرورگر IE و اندروید 2.3 به پایین پشتیبانی نمیشود .
CSS آیکون ها :
بسیار تأثیر گذارند اگر میخواهید از مقدار کمی از آیکون ها استفاده کنید . تمام کاری که باید انجام دهید این است که باید Css آیکون های دلخواه خود را در فایل استایل پروژه جایگذاری نمایید . اما برای استفاده از حجم زیادی از آیکون ها استفاده نمیشود . البته یک مشکلی دیگر هم در این دسته وجود دارد که امکان دارد در مرورگر های متفاوت به شکلی دیگر نمایش داده شوند .
1.Feather Icons :
- دسته : SVG
- تعداد آیکون ها : 240 عدد
- لایسنس : MIT
این بسته یکی از محبوبترین آیکون پک های متن باز است . همه آیکون ها در اندازه 24*24 طراحی شدهاند و دارای گوشه ی گرد میباشند که به آنها ظاهری یکسان میدهد . و پروژه هایی در گیت هاب برای استفاده این بسته در فریمورک هایی مانند Angular , Vue و React منتشر شده .
2. Linea :
- دسته : Svg , Png , Icon Font
- تعداد آیکون ها : +730 عدد
- لایسنس : CCBY
این بسته , مجموعه عظیمی از آیکون های زیبا و مدرن ارائه میدهند که دارای ظاهری دقیق و یکنواخت میباشند . خوشبختانه تمام آیکون ها به دسته های مختلفی مانند موزیک , فروشگاهی , نرمافزار و … تقسیم شدهاند .
3. Octicons :
- نوع : SVG
- تعداد آیکون ها : +170 عدد
- لایسنس : Github
Octicons مجموعه ایکون مقیاس پذیر Githun هست که از آیکون های SVG دست ساز ساخته شده . این بسته شامل لوگوی خود گیت هاب به صورت آیکون و آیکون های مربوط به برنامه نویسی مثل دیتابیس یا اعمال مربوط به گیت و … میباشد .
4. Glyph :
- دسته : Svg
- تعداد آیکون ها : 800 عدد
- لایسنس : CC BY-SA 4.0
مجموعه آیکونی زیبا و پیکسلی از نوع SVG که برای وبسایت های مدرن طراحی شده . در پروژه گیت هاب شما میتوانید یک اسکریپت Node.js دانلود کنید که شما را قادر میسازد فقط آیکون هایی که نیاز دارید را در پروژه استفاده کنید .
5. Font Awesome :
- دسته : Icon Font
- تعداد آیکون ها : 675 عدد ( در نسخه 5 این بسته 907 آیکون رایگان و 1276 آیکون ویژه ارائه شده )
- لایسنس : Sil OFL 1.1
Font Awesome محبوبترین آیکون فونت در بین طراحان وب میباشد ( بیش از 50 هزار ستاره در گیت هاب کسب کرده ) , این بسته مجموعه بزرگی از آیکون هایی را برای مقیاس پذیری , پشتیبانی جهانی مرورگر ها و دسترسی مناسب برای کاربران ضعیف پیشنهاد میدهد .
6. Ionicons :
- دسته : Icon Font
- تعداد آیکون ها : +260
- لایسنس : MIT
یک آیکون پک بسیار زیبا توسط تیم طراحی فریم ورک Ionic میباشد . که بیش از 260 آیکون زیبا پیشنهاد میدهد , بعضی آنها در سبک فلت ضخیم و بعضی دیگر در سبک مدرن نازک هستند .
7. Material Icons :
- دسته : Icon Font
- تعداد آیکون ها : +900 عدد
- لایسنس : Apache
بسته رسمی برای شیوه طراحی متریال آرائه شده توسط گوگل و تمام آیکون ها در اندروید میباشد . که شامل بیش از 900 آیکون که همه در سبک متریال ساخته شدهاند و تضمین میکند که وقتی با هم ترکیب میشوند همیشه زیبا به نظر میآید .
8. Icono :
- دسته : CSS Icons
- تعداد آیکون ها : 130 عدد
- لایسنس :MIT
مجموعهای از آیکون های Css میباشد . برای راه اندازی آنها , تمام کاری که باید انجام دهید این است که باید فایل .css را دانلود کنید , یک برچسب یا عنصر خالی (بدون محتوا ) در HTML بسازید و کلاس مورد نظر را به آن اختصاص دهید . تمام آیکون ها به شکلی ساخته شدهاند که فقط یک برچسب HTML برای نمایش آن نیاز دارید .
9. CSS Icon :
- دسته : Css Icons
- تعداد آیکون ها :190 عدد
- لایسنس : CC0 v1.0 Universal
یک بسته دیگر که تمام آیکون های آن توسط CSS ساخته شده این آیکون پک میباشد . این پروژه یک وبسایت عالی برای پیشنمایش آیکون ها دارد که شما میتواند هر آیکون را بررسی کرده و ببینید چگونه اجرا میشود . اگر شما فقط یک یا دو آیکون نیاز دارید از این بسته میتوانید به راحتی فقط CSS آن قسمت را کپی کرده و در پروژه خود اضافه کنید و بدون آنکه چیزی دانلود کنید از آیکون های مورد نظرتان استفاده نمایید .