بهترین کتابخانه های آیکون برای طراحی وب

آیکون ها در دنیای وب

همانطور که می دانید آیکون ها از عناصر بسیار پرکاربرد طراحی وب می باشند. امروزه به هر وب سایتی سر بزنید محال است که در قسمتی از آیکونی استفاده نکرده باشد! البته این شهرت و محبوبیت دلایل خودش را هم دارد؛ به طور مثال آیکون ها طراحی صفحات ما را بسیار زیبا می کنند و از طرفی مطالب مهمی را تنها با یک شکل به کاربر می فهمانند. به طور مثال همه‌ی ما می دانیم که آیکون چرخ دنده یعنی تنظیمات (settings) و هر کسی از هر نرم افزار یا وب سایتی استفاده کند و علامت چرخ دنده را ببیند می فهمد باید از آن جا ایمیل یا مشخصات پروفایل خود را تغییر دهد، حتی اگر هیچ نوشته ای نداشته باشیم.

شاید برای طراحان گرافیک استفاده از آیکون ها ساده تر باشد چرا که کافیست طرح png یا هر فرمت دیگری را وارد برنامه‌ی ویرایش خود کنند اما برای ما توسعه دهندگان مسئله کمی پیچیده تر است.

استفاده از آیکون ها به صورت png و یا هر فرمت تصویری دیگر معایبی دارد؛ اول اینکه حجم این تصاویر نسبت به دیگر روش ها بسیار بالاتر است، دوم اینکه مقیاس پذیری (بزرگ و کوچک شدن) آن ها نه تنها دردسر دارد، بلکه کیفیت را نیز تحت تاثیر قرار می دهد.

به همین دلیل توسعه دهندگان وب به فکر دیگری افتادند؛ استفاده از آیکون ها به صورت وکتور!

وکتورها عناصر گرافیکی هستند که در اثر افزایش یا کاهش اندازه، کیفیت خود را از دست نمی دهند؛ SVG یک مثال از گرافیک هایی است که بر پایه‌ی وکتور هستند و می تواند بی نهایت بزرگ یا کوچک شود. نوع دیگری از گرافیک های وکتوری فونت ها هستند. حتما متوجه شده اید که فونت ها با افزایش یا کاهش اندازه دچار افت کیفیت نمی شوند.

فونت ها و SVG ها از مشهورترین و محبوب ترین فرمت های رایج برای پیاده سازی آیکون ها هستند.

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

در این مقاله 10 مورد از برترین و محبوب ترین کتابخانه های آیکون برای طراحی سایت و نرم افزار را به شما معرفی می کنیم.

1. The Noun Project

The Noun Project یکی از بزرگترین کتابخانه های آیکون در کل دنیا است و برای هر کاری که شما بخواهید آیکونی سراغ دارد. اکثر آیکون های این کتابخانه از سمت طراحان حرفه ای ایجاد و منتشر شده اند. بنابراین چه توسعه دهنده‌ی وب هستید و چه توسعه دهنده برنامه های موبایلی، می توانید مطمئن باشید که آیکون های حرفه ای و بسیار با کیفیتی را در این سایت پیدا خواهید کرد.

ویژگی های اصلی این کتابخانه:

• آیکون های رایگان و پولی
• دارای مجموعه آیکون (با یک تم و طرح)
• دارای نرم افزار برای کاربران Mac
• بروزرسانی و اضافه کردن آیکون های جدید به صورت هر روزه

2. IconMonstr

IconMonstr کتابخانه ای بسیار بزرگ با بیش از 4300 آیکون و 304 مجموعه است. تمام آیکون ها به دو صورت filled (تو پُر) و outline موجود می باشند تا شما بتوانید از آن ها در هر برنامه ای استفاده کنید. قابلیت جستجوی این وب سایت بسیار قوی است و به کاربران اجازه می دهد که آیکون های مورد علاقه شان را در فهرست favorites ذخیره کنند.

ویژگی های اصلی این کتابخانه:

• تمام آیکون ها رایگان هستند
• مجموعه آیکون های کاربردی
• قابلیت دانلود آیکون ها با 4 فرمت متفاوت
• دارای آیکون های کوچک شده مخصوص استفاده در وب

3. Good Stuff No Nonsense

تعداد آیکون های کارتونی و طراحی شده با دست در Good Stuff No Nonsense کم نیست! حتما دیده اید که برخی از وب سایت ها ظاهری دارند که انگاری با دست طراحی شده اند تا تجربه‌ی کاربری را از سمت مدرن و صنعتی دور کنند. در این نوع از وب سایت ها استفاده از آیکون های Good Stuff No Nonsense بسیار به کار می آید. تمامی آیکون های این وب سایت توسط یک طراح طراحی شده اند بنابراین می توان مطمئن بود که همگی یک دست و مرتب هستند. همچنین اکثر آیکون ها به صورت وکتور شده نیز در دسترس هستند.

ویژگی های اصلی این کتابخانه:

• آیکون های رایگان و آیکون های ارزان قیمت
• قبول سفارش طراحی آیکون های اختصاصی
• قابلیت خرید مجموعه آیکون یا تک آیکون
• آیکون ها در چندین فرمت مختلف موجود هستند

4. Orion Icon library

Orion از تازه وارد های دنیای آیکون ها محسوب می شود. این پروژه توسط Pixeden شروع شده است و هدف آن ایجاد آیکون های انعطاف پذیر و مختلف برای طراحی وب است. این آیکون ها در خود وب سایت و با ویژگی های آن قابل شخصی سازی و تغییر هستند؛ به طور مثال می توانید طول و عرض آیکون ها را تغییر دهید، زاویه‌ی گوشه ها را تغییر دهید، stroke اضافه کنید، رنگ های اولیه و ثانویه آیکون را تغییر دهید و ... . قابلیت جستجوی این سایت نیز بسیار قوی می باشد و می توانید به راحتی آیکون های مورد نظرتان را پیدا کنید.

ویژگی های اصلی این کتابخانه:

• هزاران آیکون به صورت رایگان + آیکون های بیشتر در صورت خرید حساب pro
• حساب pro به شما اجازه می دهد به هر شکلی که دوست دارید از آیکون ها استفاده کنید (بدون license)
• استفاده‌ی بسیار آسان و ویرایش ساده‌ی آیکون ها

5. IcoMoon

کتابخانه‌ی IcoMoon مورد استفاده‌ی شرکت های بزرگ و کوچک است و از یک نظر با بقیه‌ی کتابخانه ها تفاوت اساسی دارد؛ این کتابخانه آیکون ها را به صورت فونت های شخصی سازی شده نیز ارائه میدهد و به شما اجازه می دهد glyph ها را ویرایش کنید. این وب سایت 4000 آیکون برای طراحی سایت و نرم افزارها را به صورت رایگان در اختیار شما قرار می دهد. قوانین استفاده و license برای مجموعه آیکون ها به طور شفاف و کامل توضیح داده شده است بنابراین جای هیچ گونه ابهام و سردرگمی را باقی نمی گذارد. از ویژگی های بسیار عالی این کتابخانه این است که به شما اجازه می دهد آیکون های انتخاب شده و شخصی سازی شده‌ی خود را به صورت یک فایل فونت در آورده و در وب سایت خود استفاده کنید؛ بدین صورت هیچ گاه از آیکون هایی که مورد نیازتان نباشد استفاده نخواهید کرد.

ویژگی های اصلی این وب سایت:

• دارای آیکون های رایگان و پولی
• وجود گزینه های مختلف جهت انتخاب نوع فرمت آیکون ها
• دارای ابزاری کامل برای مدیریت آیکون های شما
• بروزرسانی های رایگان و ساده از طریق Cloud synching (همگام سازی ابری)

6. Freepik

کتابخانه‌ی Freepik پایگاه داده‌ی بسیار بزرگی از انواع وکتور ها، آیکون ها و فایل های گرافیکی است که نیاز انواع طراحان گرافیک را برطرف می کند. قسمت آیکون های این وب سایت حدود 100 هزار فایل گرافیکی دارد که شما می توانید از بین آن ها (از طریق جستجو و دسته بندی ها) آیکون مورد نظرتان را انتخاب کنید. هر نوع آیکونی که بخواهید در این وب سایت پیدا خواهید کرد ولی هر آیکون/مجموعه آیکون قوانین licensing مخصوص خودش را دارد.

ویژگی های اصلی این کتابخانه:

• رایگان برای استفاده‌ی شخصی و تجاری
• دارای سه فرمت PNG و EPS و SVG برای دانلود آیکون ها
• فایل های گرافیکی و وکتور های دیگر این وب سایت به راحتی قابل ویرایش هستند بنابراین می توان از آن ها به عنوان آیکون استفاده کرد.
• مرتبا آیکون های جدیدی به سایت اضافه می شوند.

7. Pictos

Pictos آیکون ها را هم به صورت فونت و هم به صورت Pictos Redux ارائه می دهد که سیستمی برای ویرایش و تغییر اندازه‌ی آیکون ها و مخصوص طراحان وب است. آیکون های این سایت به سه صورت line (خطی) و solid (تو پُر) و color (رنگی) ارائه می شوند بنابراین هر نوع نیازی را تامین می کنند. تعداد آیکون های کلاسیک این وب سایت به 800 مورد می رسد که به صورت خطی هستند.

ویژگی های اصلی این کتابخانه:

• دانلود رایگان و پولی آیکون ها
• ارائه‌ی آیکون ها در فرمت های مختلف
• آیکون ها در سه نوع Line و color و solid موجود اند
• تمامی آیکون ها به صورت 24 در 24 پیکسل طراحی شده اند

8. Flaticon

Flaticon با مجموع 1 میلیون (!) آیکون وکتوری یکی از غول های این لیست محسوب می شود. کاربران این کتابخانه می توانند تعداد نامحدودی آیکون را دانلود کرده و به ویژگی های شخصی سازی آن ها نیز دسترسی داشته باشند. تمامی آیکون ها قابلیت شخصی سازی دارند. بنابراین می توانید بر اساس نیاز خود آن ها را تغییر دهید تا پاسخگوی پروژه های شما باشند. Flaticon قابلیت تولید آیکون به صورت فونت را نیز می دهد که می توانید از آن استفاده‌ی شخصی و یا حتی تجاری داشته باشید. همچنین اگر از کاربران Mac هستید، می توانید نرم افزار Flaticon را دانلود کنید تا به راحتی با آیکون ها در برنامه های Photoshop و Sketch و Illustrator و ... کار کنید.

ویژگی های اصلی این کتابخانه:

• دارای ثبت نام رایگان و پولی
• هر ماه مجموعه آیکون های جدیدی اضافه می شود
• می توانید آیکون ها را در چندین فرمت مختلف دانلود کنید
• علاوه بر آیکون های بر پایه‌ی وکتور، آیکون های raster (پیکسلی) نیز قابل دانلود هستند.

9. Font Awesome

کتابخانه‌ی Font Awesome در واقع یک فونت است که شامل 1500 آیکون می باشد. این آیکون ها به راحتی و با دستورات CSS ویرایش می شوند و با انواع فریم ورک ها سازگاری دارند. تمامی آیکون های Font Awesome بر پایه‌ی وکتور هستند بنابراین هیچ جای نگرانی برای کیفیت نیست و همه چیز دست طراح خواهد بود. نکته‌ی مهم اینجاست که هیچ کدام از این آیکون ها به جاوا اسکریپت وابسته نیستند بنابراین در زمینه‌ی پشتیبانی از مرورگر ها مشکلی ندارند. همچنین آیکون های متحرک و دارای انیمیشن نیز در این لیست موجود می باشند.

ویژگی های اصلی این کتابخانه:

• تمامی آیکون ها رایگان هستند.
• لحاظ کردن موضوع accessibility
• بروزرسانی آیکون ها در وب سایت های مختلف بسیار آسان است.
• برای تمامی آیکون ها یک cheat sheet (فایلی که تمامی کلاس ها و دستورات در آن آمده است) در نظر گرفته شده است

10. Behance

Behance بیشتر از آنکه یک کتابخانه باشد جایی برای نمایش قدرت و توانایی طراحان گرافیک به حساب می آید! این وب سایت دارای هزاران آیکون برای سایت و طراحی نرم افزار است اما پیدا کردن آن ها در حجم انبوه آیکون ها ممکن است کار سختی باشد. انعطاف پذیری مجموعه آیکون های مختلف بر اساس طراح و تنظیمات اعمال شده توسط او بسیار متفاوت است بنابراین باید در این مورد دقت کافی را به خرج دهید. برای راحتی کار می توانید از صفحه‌ی جست و جوی Behance استفاده کنید تا دچار سردرگمی نشوید.

ویژگی های اصلی این کتابخانه:

• هزاران آیکون به صورت رایگان در اختیار شماست.
• طراحان می توانند نتایج جستجو را با ابزار مختلف فیلتر کنند.
• هر هفته آیکون های جدیدی اضافه می شوند.
• دارای آیکون های بسیار خاص برای کار های خاص.

امیدوارم از این مقاله استفاده کرده باشید.