ডিজাইনে কালারের ব্যাবহার:: পর্ব-০৭ | How to use color in Design:: Part-07 | Color Harmony - টেকএলার্মবিডি।সবচেয়ে বড় বাংলা টিউটোরিয়াল এবং ব্লগ
Profile
তাহমিদ হাসান

মোট এলার্ম : 299 টি

তাহমিদ হাসান
দেখিতে গিয়াছি পর্বতমালা,,, দেখিতে গিয়াছি সিন্ধু,,, দেখা হয় নাই চক্ষু মেলিয়া,,, ঘর হতে শুধু দু’পা ফেলিয়া,,, একটি ধানের শীষের উপর একটি শিশির বিন্দু। !!!!!!!!! তাই টেকএলার্মবিডিতে এসেছি জানার জন্য।

আমার এলার্ম পাতা »

» আমার ওয়েবসাইট : http://www.graphicalarm.com

» আমার ফেসবুক : www.facebook.com/tahmid.hasan3

» আমার টুইটার পাতা : www.twitter.com/tahmid1993


স্পন্সরড এলার্ম



ডিজাইনে কালারের ব্যাবহার:: পর্ব-০৭ | How to use color in Design:: Part-07 | Color Harmony
FavoriteLoadingপ্রিয় যুক্ত করুন
Share Button
আসসালামু আলাইকুম,
কয়েক বছর পরে কালার আর্টিকেল লিখতে শুরু করলাম। নিয়মিত করার চিন্তা তবে যদি আপনারা বেশি বেশি শেয়ার করেন। এগুলো সব ই আপনাদে,র খেদমতের জন্য। সুতরাং বেশি মানুষ জানতে পারলে আমার ভালো লাগবে এবং বেশি মানুষ উপকৃতও হবে।
যারা পূর্বের পর্বগুলো পড়েননি, তারা এই আর্টিকেল পড়ার পূর্বে সেগুলো পড়ে নিবেন। পূর্বের আর্টিকেল না পড়ে ভুলেও এই আর্টিকেল পড়বেন না দয়া করে। তাহলে তেমন ভালোভাবে বুঝতে সক্ষম হবেন না।

ডিজাইনে কালারের ব্যাবহার পর্ব-০১ : https://cutt.ly/Sl4SsQ1

ডিজাইনে কালারের ব্যাবহার পর্ব-০২ : https://cutt.ly/Bl4SEcd
ডিজাইনে কালারের ব্যাবহার পর্ব-০৩ : https://cutt.ly/zl4SIuk
ডিজাইনে কালারের ব্যাবহার পর্ব-০৪ : https://cutt.ly/rl4SL3n
ডিজাইনে কালারের ব্যাবহার পর্ব-০৫ : https://cutt.ly/Pl4S1ST
ডিজাইনে কালারের ব্যাবহার পর্ব-০৬ : https://cutt.ly/fl4S7Cm
গত ৬ পর্বে আমরা ডিজাইনের বেসিক তথ্যগুলো জানতে পেরেছি। ডিজাইন সাইকোলজি পার্টে আমরা কিছুটা জেনেছি যে, কোন কোন ডিজাইনের ক্ষেত্রে কোন ধরনের কালার ব্যাবহার করতে হয়। এছাড়াও কুল কালার ও ওয়ার্ম কালার পর্বের মাধ্যমেও এটা অনেকটা পরিষ্কার হয়েছে।

তবে অধিকাংশের মধ্যেই একটি গ্যাপ হচ্ছে, যখন মাল্টিকালার ব্যবহার করতে হয় তখন কোন কোন কালার নিতে হবে। আমরা পেটুক কালার বা খাবার জাতীয় ব্রান্ডের কালার সম্পর্কে জেনেছি। আইসক্রীম, বরফ, ম্যাচ ফ্যাক্টরি ইত্যাদী জেনেছি। লাল সবুজ নীল ইত্যাদী কালার নিয়েও কমবেশি জেনেছি।

কিন্তু এগুলো সব ই সিঙ্গল কালার সিলেকশন। কিন্তু কাজের ক্ষেত্রে এগুলো শুধু বিষয় নির্ধারণ করে। কিন্তু কম্বিনিশন কালার নির্ধারণ করে না।

আগের পর্বে কুল কালার এবং ওয়ার্ম কালারের ব্যাবহার দেখেছি। কিন্তু কুল কালার এবং ওয়ার্ম কালার যদি একত্রে ব্যাবহার করতে চাই তাহলে কিভাবে ব্যাবহার করবো? কুল কালার তো একটি নয়। অপর দিকে ওয়ার্ম কালারও একটি নয়। যদি ওয়ার্ম কালারের মধ্য থেকেই অনেকগুলো কালার এক সাথে ব্যাবহার করতে হয় তাহলে কিভাবে ব্যাবহার করবো? অথবা কুল কালারের মধ্যেই যদি অনেকগুলো কুল কালার একসাথে ব্যাবহার করতে হয় তাহলে কিভাবে ব্যাবহার করবো?

এই প্রশ্নগুলোর সমাধান ই হবে আজকের এই পর্বে।

আমরা সবাই কালার সারকেল দেখেছি। কিছু কিছু ওয়েব এপ্লিকেশন রয়েছে কালার সার্কেল নিয়ে। কিন্তু আমরা তা ব্যাবহার করতে পারিনা বা বুঝিনা।
ডিজাইনে মাল্টি কালার ব্যাবহার করলে কোন কালারের সাথে কোন কালার ভালো ফুটে উঠবে এটা কালার সার্কেল থেকেই বের করতে হয়। কালার সার্কেল থেকে মাচিং কালার বের করার এই পদ্ধতি বা জ্ঞানকে বলা Color Harmony.

এই ইমেজটি লক্ষ্য করুন। এটি একটি কালার হুইল।

এছাড়াও আরো অনেক কালা হুইল রয়েছে। একেকটি কালার হুইল একেকভাবে করা হয়েছে। কিন্তু কালার বের করার জন্য অবশ্যই আপনাকে কালার হারমনি সম্পর্কে ভালো ধারণা থাকতে হবে। আমার এই আর্টিকেলটি আপনার উপকারে আসবে আশাকরি। আরো কিছু কালার হুইল লিংক নিচে দেয়া হলো:
এগুলো আমার কাছে ভালে মনে হয়েছে। তবে সবগুলো এক নয়। নিচের থিওরি অনুযায়ী এগুলো ব্যাবহার করবেন। কালার হুইলে আরো অপনশন রয়েছে, যেগুলোর তেমন ব্যাবহার হয় না। এই আর্টিকেলে যা উল্লেখ করবো এগুলো সর্বাধিক গ্রহণযোগ্য মতামত এবং ব্যাবহৃত।

Color Harmony

তবে অবশ্যই ডিজাইন ক্যারেকটার বা সাবজেক্টের সাথে যেন কালারের মিল থাকে। সেই দিকে অবশ্যই লক্ষ্য রাখতে হবে। মনে করুন আপনি আইসক্রিমের ব্রান্ডিং ডিজাইন করবেন তখন অবশ্যই আপনাকে কুল কালারকে প্রাধান্য দিতে হবে। তেমনিভাবে কালার সিমবোলিজম বা অর্থের সাথে ডিজাইনকে সঙ্গতিপূর্ণ রাখতে হবে। যখন এভাবে সঙ্গতিপূর্ণভাবে একাধিক কালার ব্যাবহার করতে চাইবেন তখন আপনাকে কালার সিলেকশনের জন্য কালার হুইল ব্যাবহার করতে হবে। আর এই কালার হুইল থেকে সঠিক কালার নির্বাচনের জন্য যে থিওরি বা ফর্মূলা অনুসরণ করতে হয়, তাকেই বলা হয় Color Harmony.

বিভিন্ন কার্টুন, মুভি ইত্যাদীতে আমরা বহু কালারের ব্যাবহার দেখতে পাই। এছাড়া যারা ড্যাসবোর্ড ডিজাইন করেন বা ব্রান্ডিং কালার নির্বাচন করেন। সেক্ষেত্রেও অনেকেই কালার নির্বাচন নিয়ে অনেক সমস্যায় পড়েন। তো এইসব সমস্যার সমাধানের জন্য কালার হারমনি থিওরি এপ্লাই করা দরকার।

আমাদের দেশে যারা ড্যাসবোর্ড ডিজাইন করে, অধিকাংশরাই তার নিজের ইচ্ছামত কালার নিয়ে ডিজাইন করে। এছাড়াও মোবাইল এপস, থিম ডেভেলপমেন্টে, ব্যাকগ্রাউন্ড ডিজাইন সহ বহু জায়গায় অনেক কালার ব্যাবহার করার প্রয়োজন হয়। যদিও নিজের ইচ্ছেমত কালার নেয়ার ফলে ডিজাইন সুন্দর হয়, কিন্তু ভালো ফিডব্যাক পওয়ার জন্য অবশ্যই আপনার কালার হারমনি থিওরি জানতে হবে।

নিচের ড্যাসবোর্ডটির দিকে খেয়াল করুন। দেখতে তেমন ভালো লাগে না। বোরিং বোরিং লাগে। কেননা, অনেক কালার ব্যাবহার করলেও সূত্র না জানার কারণে সঠিক কালার নির্বাচন করতে পারেনি।
এ্যংগ্রি বার্ড যারা দেখেছেন তারা জানেন যে, সেখানে বিভিন্ন ক্যারেকটারের পাখি রয়েছে। যাদের ক্যারেকটার অনুযায় কালার ও ভিন্ন ভিন্ন। মেইন এ্যংগ্রি বার্ড এর মধ্যে ওয়ার্ম কালার ব্যাবহার হয়েছে। এছাড়া শান্ত পাখির ক্ষেত্রে কুল কালার ব্যাবহার হয়েছে। একেকটা পাখির মধ্যে ওয়ার্ম বা কুল কালারের দুই বা ততধিকও ব্যাবহার হয়েছে। আর টোটাল কার্টুনের মধ্যে অনেকগুলো ক্যারেকটার অনেকগুলো কালার। এগুলো সব ই কালার হারমনি থিওরির মাধ্যমে সিলেক্ট করা হয়েছে। যার জন্য কালারের আধিক্যতার কারণে বোরিং লাগে না। বরং ভালোই লাগে। অর্থাৎ প্রত্যেকটা ক্যারেকটারের মধ্যে আলদাভাবে অনেকগুলো কালার + পুরো কার্টুন মুভিতে একটা কালার থিওরি। নিচের পোস্টারটি লক্ষ্য করুন। কোন বোরিং লাগে না। বরং কালারের সুন্দর ব্যাবহারের জন্য দৃষ্টিনন্দন একটি ডিজাইন হয়েছে।
আশা করি সকলেই বুঝতে পেরেছেন যে, কালার হারমনি কি এবং তার গুরুত্ব কতটুকু।

যেভাবে কালার নির্বাচন করতে হয় !

কালার নির্বাচন করার জন্য আমাদের একটি কালার হুইল প্রয়োজন। উপরে কালার হুইলের একটি লিংক দিয়েছি। এছাড়া ওয়েবে অসংখ্যা কালার হুইল সফট রয়েছে। যেগুলো দিয়ে খুব সহজেই কালার নির্বাচন করতে পারবেন। যারা ফটোশপ ব্যাবহার করেন তারা ফটোশপের মধ্যে প্লাগিন ব্যাবহার করেও কালার নির্বাচন করতে পারবেন।
কালার নির্বাচনের পদ্ধতি অনুসারে কালার হারমনিকে মোট ৫ ভাগে ভাগ করা হয়েছে।
  1. Direct/Complementary Harmony
  2. Split Complementary
  3. Triadic Harmony
  4. Analogous Harmony
  5. Tetradic Harmony
অনেকে আরো অনেক শ্রেনীভেদ করে থাকে। যেমন Monocromatic Harmony। কিন্তু এই মনোক্রোমেটিক হারমনির জন্য টিনস, টনস আর শেডস এর আর্টিকেল ই যথেষ্ট। টিনস, টনস আর শেডস এর মাধ্যমে যে বহু কালার স্টেপগুলো তৈরী করে কালার ব্যাবহার করা হয়। সেগুলোই মনোক্রোমেটিক।
নিচের ইমেজটি লক্ষ্য করুন। এটাই হচ্ছে মনোক্রোমেটিক হারমনির উদাহরণ। যা আমরা পূর্বের আর্টিকেলে জেনেছি। এটা মূল কালার হারমনির মধ্যে যায় না। কারণ হারমনি টা বহু কালার নিয়ে কাজ করে। কিন্তু অনেকেই আবার এটাকে হারমনির অন্তর্ভূক্ত করেন।

1. Direct / Complementary Harmony কি?

কালার হুইলে একটি কালারের সরাসরি বিপরীত কালারটি নিয়ে কাজ করাই হচ্ছে Complementary Harmony। নিচের ইমেজটি লক্ষ্য করুন:
অর্থাৎ যদি আমরা দুইটি কালার নিয়ে কাজ করার সময় ১ টি কালার ও তার সরাসরি বিপরীত আরেকটি কালার নিয়ে কাজ করি। সেটােই হচ্ছে ডিরেক্ট বা কমপ্লিমেন্টারি হারমনি।

এই কালার সিলেকশন মূলত মনযোগ আকর্ষণের ক্ষেত্রে ব্যাবহার করা হয়। উদাহরণ হিসেবে আমাদের দেশের লাল সবুজ পতাকাই ধরুন। দূর থেকেও কেমন যেন একটা মনযোগ আকর্ষণ করে। যা অন্য কোন রং করতে পারে না।

নিচের ইমেজ লক্ষ্য করুন।
আমরা যখন পাসপোর্ট সাইজের ছবি করি। এক কথায় পিছনে এক কালার ব্যাকগ্রাউন্ড নিয়ে ছবি করি। তখন লক্ষ্য করবেন অধিকাংশ এই ধরনের ছবির পিছনের ব্যাকগ্রাউন্ড কালার হিসেবে নীল কালার ব্যাবহৃত হয়ে থাকে। উপরের কালার হুইলে লক্ষ্য করবেন যে, নীল রং এর বিপরীতে রয়েছে, Orange কালার। যা আমাদের চামড়ার রং। আর এই রংয়ের সাথে নীল রংটাই অধিক মানানসই এবং আকর্ষণীয় করে তোলে। আপনি অন্য রং দিয়ে ট্রাই করে দেখতে পারেন। তেমন সুন্দর লাগবে না। তবে আপনি যদি সাদা চামড়ার হয়ে থাকেন, তাহলে ভিন্ন কথা।

এ কারণেই আমরা আমাদের মনের অজান্তেই এই রংটাকে ব্যাকগ্রাউন্ড হিসেবে বেছে নেই।

নিচের ছবিগুলো ভালো ভাবে পর্যবেক্ষণ করুন এবং কিভাবে এই রংগুলোর মিশ্রণ করে ডিজাইন করবেন তা অনুধাবন করুন।

এই ইমেজগুলো থেকে আপনি এই হারমনির উদাহরণ নিয়ে কিভাবে ডিজাইন করবেন তা আশা করি বুঝতে পেরেছেন। এবার নিচের ইমেজ টি লক্ষ্য করুন।
Hulk কে চেনেন না এমন ডিজাইনার খুব কম ই রয়েছে। হাল্ক এর রং সবুজ এবং ভায়োলেট ব্যাবহার করা হয়েছে। এর কারণ কি?

১. প্রথমত এই দুটি কালার হচ্ছে কমপ্লিমেন্টারি হারমনি থিওরির

২. হাল্ক এর বিশাল দেহ দেখলে যে কেউ ই ভয় পাবে। কিন্তু যখন তার গঠন সবুজ সংকেত বহন করতেছে, তখন সবাই ভাববে যে, সে দৈত্য হলেও ক্ষতিকর নয়। কিন্তু যখন সে রেগে যায় তখন Violation সৃষ্টি করে। যার জন্য তার কালার হিসেবে সবুজ এবং ভায়োলেট কালারকেই নির্বাচন করা হয়েছে।

অর্থাৎ শুধু ইচ্ছেমত কালার নির্বাচন করলেই হবে না। মিশন ভিশন, ব্রান্ড মিনিং, কোম্পানীর ক্যাটাগরি এবং ক্যারেকটারের উপরে ডিপেন্ড করে কালার নির্বাচন করতে হবে। যা উপরে আমি বলেছি। আর কোন কোম্পানীর জন্য বা কোন ধরনের ডিজাইনের জন্য কি কালার সিলেক্ট করবেন তার জন্য আমার পূর্বের আর্টিকেল গুলো পড়ুন। কালার সিমবোলিজম নিয়ে ভালো করে জানুন।

2. Split Complementary কি?

একটি কালারের সরাসরি বিপরীত কালারের বাম এবং ডা পর্শ্বের কালার নিয়ে যে সার্কেল টা তৈরী হয়। এটাই হচ্ছে Split Complementary Harmony। নিচের ইমেজ টি লক্ষ্য করুন:
লাল এর সরাসরি বিপরীত কালার হচ্ছে সবুজ। কিন্তু সবুজ না নিয়ে তার ডান এবং বাম পার্শ্বের কালার নিয়ে যে ৩ টি কালারের স্প্লিট তৈরী হয়েছে। এটাকে বলা হয় Split Complementary Harmony।

অর্থাৎ যখন আপনি ৩ টি কালার ব্যাবহার করতে চান এবং আপনার কাজের ইনফরমেশন ওয়ার্ম এবং কুল কালারকে প্রাধান্য দেয়। তখন আপনি এভাবে কালার নির্বাচন করে কাজ করতে পারেন। কালার সিলেকশনের জন্য অবশ্যই কালার সিমবোলিজম সম্পর্কে আপনার ভালো ধরনা রাখতে হবে।

এবার নিচের ইমেজগুলো ভালোভাবে পর্যবেক্ষণ করুন:
আশাকরি বুঝতে অসুবিধা হচ্ছে না যে, কিভাবে আপনি এই কালারটা আপনার ডিজাইনে ব্যাবহার করবেন।

3.Triadic Harmony কি?

কালার হুইলে সমান দূরত্বে একটি ত্রিভুজ কে যদি আঁকা হয়। তাহলে ত্রিভুজের তিনটি কোণে যে কালার গুলো থাকে। সেগুলো নিয়ে কাজ করাই হচ্ছে Triadic Harmony।
নিচের ইমেজটি লক্ষ্য করুন:
এভাবেও আপনি কালার নির্বাচন করতে পারেন। এক্ষেত্রে আপনি একটি কালারকে মূল হিসেবে ধরতে পারেন এবং বাকিগুলোকে সাব কালার হিসেবে নিতে পারেন। অথবা ৩ টি কালারকেই সমান প্রাধান্য দিয়ে কাজ করতে পারেন। তবে মনযোগ আকর্ষণের জন্য ওয়ার্ম কালারগুলোই বেশি ব্যাবহার হয়। নিচের ইমেজ লক্ষ্য করুন:
এভাবে আপনি ৩ টি কালার নির্বাচন করতে পারেন। আরো পরিষ্কার হওয়ার জন্য নিচের ইমেজগুলো ভালোভাবে পর্যবেক্ষণ করুন:

4. Analogous Harmony কি?

কালার হুইলের একটি রঙ্গের এর ডান পার্শ্ব এবং বাম পার্শ্বের রং নিয়ে যে কালারের প্যালেট তৈরী হয়। তাকেই Analogous Harmony বলে। নিচের ইমেজটি লক্ষ্য করুন:
কারো ডিজাইনের ইনফো যদি একটি কালার সাপোর্টেড হয় কিন্তু সে চায় আরো কয়েকটি কালার নিয়ে ডিজাইন করি। তখন কাছাকাছি মিনিং এর কালার গুলো Anlogous পদ্ধতিতে সিলেক্ট করে কাজ করতে পারেন। অনেক ক্ষেত্রে কালার গুলো বোরিং লাগলেও বেস্ট ফিডব্যাকের জন্য এই পদ্ধতির গুরুত্ব অনেক। এমনিভাবে আপনি যদি একই কালের বিভিন্ন ভার্সন ব্যাবহার করে ডিজাইন করতে চান। তখন মনোক্রোমেটিক পদ্ধতিও অনুসরণ করতে পারেন। নিচের ইমেজগুলো পর্যবেক্ষণ করুন:
আশা করি এবার সকলেই পরিষ্কারভাবেই বুঝেছেন যে, কোন কোন ক্ষেত্রে এবং কিভাবে এই কালার হারমনি সিলেক্ট করে আপনার কাজকে সুন্দর করে তুলবেন।

5. Tetradic Harmony কি?

কালার হুইলের মধ্যে যদি আপনি সমান দূরত্বের চতুর্ভূজ আকৃতির সার্কেল অংকন করেন। তাহলে চারটি কোণে যে রংগুলো থাকে। সেগুলোই হচ্ছে Tetradic Harmony এর অংশ।
নিচের ইমেজটি লক্ষ্য করুন:
এভাবে আপনি কালার নিয়ে কাজ করতে পারেন। কিন্তু এতগুলো কালার স্বাভাবিকভাবে নিয়ে কাজ করা হয় না। যদি আপনার ডিজাইনের মধ্যে এই ক্যারেকটার বা মিনিংগুলো থাকে। তাহলে আপনি এভাবে রং নির্বাচন করে ডিজাইন করতে পারেন। অথবা অনেকে ডিজাইনের মধ্যে রং দিয়ে এলিমেন্ট আলাদা করতে চায়। তখন এভাবে কালার সিলেক্ট করতে পারেন।

পূর্বে ড্যাসবোর্ডের কথা বলেছি, যদি আপনি ড্যাসবোর্ডে বা মোবাইল এপস এ এভাবে ৪ টি কালার ব্যাবহার করতে চান । তখন এভাবে কালার সিলেক্ট করে ডিজাইন করতে পারেন। নিচের ইমেজগুলো লক্ষ্য করুন:

কিভাবে এই কালারগুলো ডিজাইনে এপ্লাই করবেন তার জন্য নিচের ইমেজগুলো ভালোভাবে পর্যবেক্ষণ করুন:
আশা করি আপনার বুঝতে পেরেছেন যে, কিভাবে রং গুলো ব্যাবহার করবেন। পুনরায় কথাটি স্বরণ করিয়ে দেই যে, অবশ্যই ডিজাইন ইনফোর সাথে কালারের সামঞ্জস্য থাকতে হবে। নয়তো ডিজাইনে ভালো ফিডব্যাক পাবেন না।
”””আরেকটি কথা না বললেই নয়, যদি আপনারা শুধু আর্টিকেল পড়েই চলে যান আর ভাবেন অনেক কিছু জেনে গেছেন এবং লাইক, কমেন্ট, শেয়ার না করেন। তাহলে পরবর্তীতে আর আর্টিকেল পাবেন না। ৬ পর্বের পরে বন্ধ করে দিয়েছিলাম শুধু এই কারণেই। অনেকে ক্রেডিট ছাড়াই কপি করেন। যেটা আমি আশা করি না। আবার অনেক সিনিয়র ডিজাইনার রয়েছেন যারা চুপে চুপে আর্টিকলে পড়ে চলে যান, তাদের প্রতি অনুরোধ, পোস্টটি উপকারি মনে হলে শেয়ার করতে কার্পণ্য করবেন না। কেননা এতে অনেকে উপকার হবে। আর এত কষ্ট করে আর্টিকেল লেখার উদ্দেশ্য এটাই। “””
ইনশা আল্লাহ পর্যায়ক্রমে এগুলো নিয়ে পর্ব লিখবো। ভালো লাগলে অবশ্যই উৎসাহ মূলক কমেন্ট এবং লাইক আশা করছি। আর অবশ্যই পোস্টটি শেয়ার দিবেন। আর আমার সকল পোস্টগুলো পড়তে হ্যাশট্যাগে ক্লিক করলেই পেয়ে যাবেন। তবে হ্যাশ ট্যাগে সব পোস্ট পাবেন না। যেগুলো এই বছর থেকে করছি সেগুলোই পাবেন।

#learnwithtahmid

আরে কেউ কপি করতে চাইলে অবশ্যই আমার নাম এবং হ্যাশট্যাগ সহকারে কপি করবেন। আর চাইলে আমার নিয়মিত আপডেট পেতে আমার ব্যক্তিগতগ্রুপে এ্যাড হতে পারেন: https://fb.com/groups/learnwithtahmid
-তাহমিদ হাসান

(2136)

Share Button
  

FavoriteLoadingপ্রিয় যুক্ত করুন

এলার্ম বিভাগঃ গ্রাফিক্স ডিজাইন

এলার্ম ট্যাগ সমূহঃ >

Ads by Techalarm tAds

এলার্মেন্ট করুন

You must be Logged in to post comment.

© টেকএলার্মবিডি।সবচেয়ে বড় বাংলা টিউটোরিয়াল এবং ব্লগ | সর্বসত্ত্ব সংরক্ষিত

জেগে উঠো প্রযুক্তি ডাকছে হাতছানি দিয়ে!!!


Facebook Icon