ওয়েবসাইটে আইকন ব্যবহার একটি কমন বিষয়। আজকে আমি বলবো আমি কোন কোন ওয়েবসাইট থেকে আইকন ব্যবহার করি। তো চলুন শুরু করি। প্রথমে বলতে চাই কোন কোন ওয়েবসাইট থেকে আমি আইকন ব্যবহার করি
১। হিরো আইকন: এই ওয়েবসাইটে ৩১৬ টি আইকন রয়েছে। খুবই সিম্পলিফাইড এবং লাইটওয়েট আইকন পাওয়া যায়। আইকনের উপর হোভার করে কপি করে নেই এবং কোড এর মধ্যে ব্যবহার করি।
২। ফন্ট অসাম: আপনার সবাই এই ওয়েবসাইটকে চেনেন। আমি ফ্রি আইকনগুলা ব্যবহার করি। সার্চ দেবার সময় ফ্রি সিলেক্ট করে সার্চ দেই। আপনি এখানে ফ্রিতে ২০৫০ টি আইকন পাবেন।
৩। সিম্পল আইকন: ব্র্যান্ডের কোন আইকন প্রয়োজন হলে এই ওয়েবসাইটটি দেখতে পারেন। মোটামুটি তিন হাজার ব্র্যান্ডের আইকন পেয়ে যাবেন এখানে।
৪। লাইন আইকন: এখানেও আপনি ফ্রিতে ২০০০ আইকন পেয়ে যাবেন। এই আইকনগুলাও খুবই লাইটওয়েট।
উপরের চারটি ওয়েবসাইট আমার আইকন চাহিদাকে ফুলফিল করে ফেলে। যদি না করে তাহলে গুগল সার্চ করে বাকীগুলা খুঁজে নেই।
ইদানিং সার্চের জন্য চ্যাটজিপিটি বেশ কাজে দিচ্ছে, ওরে বললাম
give me some website overview which provide free svg icons. I already know heroicons.com, font awesome, simpleicons.com & lineicons.com so don’t include these
আমারে উত্তর দিল
Here are some websites that offer free SVG icons, excluding the ones you mentioned:
-
Feather Icons
- Website: feathericons.com
- Overview: Feather Icons offers a collection of simple, minimalist icons. All icons are open-source, customizable, and designed to be scalable. The collection is lightweight, perfect for clean design and interfaces.
-
Material Icons
- Website: material.io/icons
- Overview: Material Icons, provided by Google, offers a large library of icons designed in accordance with Material Design principles. It includes icons for various applications and industries. The icons are free to use and downloadable in different formats, including SVG.
-
Iconmonstr
- Website: iconmonstr.com
- Overview: Iconmonstr is a collection of over 4,500 free icons designed with simplicity in mind. You can easily customize the size and color before downloading in SVG, PNG, and other formats. No attribution is required, and it’s a great source for designers looking for clean, professional icons.
-
IcoMoon
- Website: icomoon.io
- Overview: IcoMoon offers a mix of free and premium icons in vector formats. The site also allows you to create your own custom icon sets, making it easy to manage your SVG icon libraries. It’s widely used for icon font generation, but it also supports SVG file downloads.
-
The Noun Project
- Website: thenounproject.com
- Overview: The Noun Project has millions of curated icons created by a global community of designers. Many icons are free for use (with attribution), but a paid subscription allows you to access premium icons without attribution and download them in various formats, including SVG.
-
FlatIcon
- Website: flaticon.com
- Overview: FlatIcon provides a huge collection of free vector icons and stickers. Icons are available in different styles and can be downloaded in various formats, including SVG. While the free tier requires attribution, a premium plan removes this requirement.
-
SVG Repo
- Website: svgrepo.com
- Overview: SVG Repo offers a massive library of free SVG icons and illustrations. You can find over 400,000 vector graphics, which are categorized and easy to search. The icons are customizable in terms of size and color before downloading.
-
Boxicons
- Website: boxicons.com
- Overview: Boxicons is a collection of free, customizable, and high-quality vector icons perfect for both web and mobile interfaces. All icons are scalable and available in different variants like solid and outline.
These websites offer a variety of SVG icons that are free for personal or commercial use, with some requiring attribution.
যেভাবে আমি আইকন ব্যবহার করি
আইকন ব্যবহারের জন্য SVG ফরম্যাট হল বেস্ট। এই ফরমেটে ব্যবহার করলে ওয়েবসাইট স্লো হয় না, আইকনের কোয়ালিটিও হয় দারুণ। লারাভেল বা এইচটিএমএল এ ব্যবহারের জন্য আমি সরাসরি SVG কোড পেস্ট করে ব্যবহার করি। SVG এর কালার সহজেই পরিবর্তন করা যায় এবং যেভাবে ইচ্ছা সেভাবে রিসাইজ করা যায় সিএসএস দিয়ে।
এলিমেন্টরে ব্যবহারের জন্য এলিমেন্টরে ডিফল্টভাবেই SVG আপলোড করা যায় যা তারা রেন্ডার করে কোড আকারেই ব্যবহার করে। যদি কাস্টম এলিমেন্টরের এডঅনে ব্যবহার করার প্রয়োজন হয় তাহলে প্রথমে নিচের মত একটা কন্ট্রোল এড করি এডঅনে।
$this->add_control(
'icon',
[
'label' => esc_html__( 'Icon', 'textdomain' ),
'type' => \Elementor\Controls_Manager::ICONS,
'default' => [
'value' => 'fas fa-circle',
'library' => 'fa-solid',
]
]
);
তবে আইকন রেন্ডার করার সময় অবশ্যই <?php \Elementor\Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] ); ?>
ব্যবহার করে রেন্ডার করতে হবে যাতে করে আলাদা কোন ফাইল লোড করে ওয়েবসাইট স্লো না করে, কোড আকারে SVG লোড হয়।
কিছু SVG টুল যেগুলা ব্যবহার করি
আপনি কিভাবে ব্যবহার করেন? কোন কোন ওয়েবসাইট থেকে আইকন ব্যবহার করেন সেটা আমাদের জানান।