Iconify: ไลบรารีไอคอนโอเพนซอร์ส

 (icon-sets.iconify.design)
16 คะแนน โดย GN⁺ 2026-01-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • แพลตฟอร์มรวมไอคอน ที่ให้สำรวจและใช้งานชุดไอคอนโอเพนซอร์สหลากหลายได้ในที่เดียว
  • มีให้ใช้งาน 204 ชุดที่จัดหมวดหมู่ไว้หลากหลาย พร้อมไอคอนราว 280,000 รายการ
  • รองรับการดึงข้อมูลไอคอนและการสร้าง SVG/CSS ผ่าน API อีกทั้งยังมี Search API ที่นำไปใช้กับปลั๊กอินสำหรับ Figma/Sketch ได้
  • แต่ละชุดเผยแพร่ภายใต้ ไลเซนส์โอเพน ที่หลากหลาย เช่น Apache 2.0, MIT, CC BY, GPL
  • รวม ไอคอนจากระบบดีไซน์หลักๆ เช่น Google Material, Fluent UI, Font Awesome, Tabler, HeroIcons

ภาพรวมของ Iconify

  • Iconify คือ คลังกลางของชุดไอคอนโอเพนซอร์ส ที่สามารถสำรวจไอคอนหลากหลายผ่านอินเทอร์เฟซบนเว็บได้
  • แต่ละชุดไอคอนประกอบด้วยชื่อ ประเภทไลเซนส์ จำนวนไอคอน และลิงก์แยกเฉพาะ
  • ผู้ใช้สามารถกรองตามหมวดหมู่เพื่อเลือกชุดอย่าง Material, UI, Emoji, Logos, Programming เป็นต้น ได้

หมวดหมู่ไอคอนหลัก

  • กลุ่ม Material: มี 6 ชุด เช่น Material Symbols, Material Design Icons พร้อมไอคอนมากสุดเกิน 15,000 รายการ
  • ชุด UI 24px: ประกอบด้วยมากกว่า 50 ชุด เช่น Solar, Tabler, Remix, Lucide, Iconoir มีทั้งสไตล์และขนาดที่หลากหลาย
  • ชุด UI 16px / 32px: รวม 18 ชุด เช่น Carbon, IonIcons, Ant Design Icons, Bootstrap Icons
  • UI Other / Mixed Grid: รวมชุดขนาดใหญ่หลายชุด เช่น Fluent UI System Icons (18,959 รายการ), Phosphor (9,072 รายการ)
  • ชุด UI Multicolor: มีไอคอนสีสันหลากหลายจาก Streamline, Fluent Color, IconPark เป็นต้น
  • ชุด Programming: มี 9 ชุดที่เน้นการใช้งานในสภาพแวดล้อมการพัฒนา เช่น VSCode Icons, Devicon, File Icons
  • ชุด Logos: มี 15 ชุดที่เน้นแบรนด์และโลโก้ เช่น Simple Icons, SVG Logos, Web3 Icons
  • ชุด Emoji: ประกอบด้วย 11 ชุด เช่น OpenMoji, Twemoji, Noto Emoji
  • ชุด Flags / Maps: รวม 7 ชุด เช่น Circle Flags, Flag Icons
  • ชุด Thematic: มี 8 ชุดตามธีม เช่น Game Icons, Health Icons, Weather Icons
  • ชุด Archive / Unmaintained: เก็บรักษาชุดเวอร์ชันเก่า 30 ชุด เช่น Font Awesome 4~6, Eva Icons

ความหลากหลายของไลเซนส์

  • แต่ละชุดเผยแพร่ภายใต้ไลเซนส์โอเพนที่หลากหลาย เช่น Apache 2.0, MIT, CC BY, GPL, OFL(Open Font License)
  • บางชุดใช้งานได้อย่างอิสระภายใต้ CC0 (public domain) หรือ Unlicense
  • มีการระบุข้อมูลไลเซนส์ไว้อย่างชัดเจน ทำให้ตรวจสอบได้ง่ายว่า ใช้เชิงพาณิชย์หรือดัดแปลงได้หรือไม่

ตัวอย่างชุดไอคอนเด่น

  • Fluent UI System Icons: ไลเซนส์ MIT, มีไอคอน 18,959 รายการ
  • Material Symbols Light: Apache 2.0, มีไอคอน 15,180 รายการ
  • Tabler Icons: MIT, มีไอคอน 5,986 รายการ
  • Simple Icons: CC0, โลโก้แบรนด์ 3,379 รายการ
  • OpenMoji: CC BY-SA 4.0, อีโมจิ 4,449 รายการ

คุณค่าการนำไปใช้

  • ช่วยให้เข้าถึงไอคอนได้อย่างสม่ำเสมอในระบบดีไซน์และเฟรมเวิร์กที่หลากหลาย
  • นักพัฒนาและนักออกแบบสามารถเลือก สไตล์และไลเซนส์ที่ตรงกับความต้องการของโปรเจกต์ ได้ทันที
  • เป็นแพลตฟอร์มทรัพยากรที่ช่วยส่งเสริม การนำไอคอนไปใช้ซ้ำและการทำให้เป็นมาตรฐาน ในระบบนิเวศโอเพนซอร์สโดยรวม
  • ดูวิธีใช้งานและข้อมูล API/ปลั๊กอินได้ที่ หน้าเอกสารทางการ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-01-19
ความคิดเห็นจาก Hacker News

  • Iconify สามารถดึงไอคอน SVG ได้โดยตรงผ่าน API
    ฉันมักทำแผนภาพสถาปัตยกรรมด้วย D2 และเมื่อใช้คู่กับคลังไอคอนขนาดมหาศาลของ Iconify ก็ทำให้ภาพดูสมบูรณ์ขึ้นมาก
    ตัวอย่างเช่น ในแผนภาพที่เชื่อม Docker กับ Kubernetes สามารถกำหนดไอคอน SVG ของแต่ละตัวได้

  • SVG บางส่วนมี แอนิเมชัน และยังค้นหาได้ด้วย
    ฉันเคยใช้ไอคอนเหล่านี้กับโปรแกรมแก้ไขข้อความออฟไลน์ wrifocus.bounded.cc และพอใจกับผลลัพธ์มาก

    • อยากรู้ว่าใช้ชุดไอคอนอะไรบ้าง เพราะถ้ากรองด้วย “contains animations” จะเห็นเหมือนมีแค่ชุดไอคอน loader กับ weather
    • แอนิเมชันเฟืองหมุนของไอคอนตั้งค่านั้นเท่มาก ตัวเอดิเตอร์เองก็น่าประทับใจ
      อยากรู้ว่าสามารถใช้งานแบบออนไลน์โดยเก็บข้อมูลไว้บนเซิร์ฟเวอร์ได้ไหม และสงสัยด้วยว่าทำไมถึงเลือกทำเป็นแบบเบราว์เซอร์ออฟไลน์
    • ขอบคุณที่แชร์ อยากทราบเหมือนกันว่าโปรเจกต์นี้สามารถรันแบบ self-hosted ได้หรือไม่

  • icones.js.org เป็นเว็บที่ดีสำหรับค้นหาไอคอนแบบนี้

  • ทำให้นึกอยากเขียนบทความในหัวข้อ การปรับแต่งไอคอนให้เหมาะสม
    เวลาเห็นเว็บไซต์ไม่ฝังไอคอนไว้ในหน้าแล้วทำให้เลย์เอาต์สั่นไปมา มันน่าหงุดหงิดมาก

    • เห็นด้วย ไอคอนแบบอินไลน์เป็นวิธีที่ดี แต่ก็อาจทำให้ DOM มีขนาดใหญ่ขึ้น
      ขึ้นอยู่กับความซับซ้อนของไอคอนหรือความถี่ในการใช้ซ้ำ บางครั้ง lazy loading อาจเหมาะกว่า
      โดยพื้นฐานแล้วปัญหานี้เกิดจากการไม่ได้จองพื้นที่ไว้ให้ถูกต้อง
    • การกำหนดแอตทริบิวต์ width/height ก็เป็นวิธีแก้ที่ดี และบางครั้งก็มีการแนะนำ aspect-ratio ด้วย
      แต่ไอคอนแบบอินไลน์จะทำให้ แคชไม่ได้
      ดูเพิ่มเติม: บทความการปรับ CLS ให้เหมาะสมของ web.dev

  • ลิงก์ไปยังการพูดคุยก่อนหน้า: การสนทนาเดือนกันยายน 2024

  • ขอชื่นชมโปรเจกต์นี้อย่างมาก ฉันใช้มันทุกวันกับแทบทุกอย่างที่ทำ
    ฉันประหลาดใจที่สำหรับ โปรเจกต์ k3s มีทั้ง devicon แบบมีสีและแบบขาวดำ

  • Pictogrammers มีข้อได้เปรียบเล็กน้อย
    เพราะสำหรับ Material icons นั้นมี โค้ด Home Assistant ให้โดยตรง จึงกดครั้งเดียวก็ได้โค้ดที่ต้องการ

  • ขอแนะนำ The Noun Project เป็นแหล่งไอคอนที่ยอดเยี่ยมอีกแห่ง
    มีทั้งไอคอนฟรี, CC-BY-3.0 และไอคอนแบบไลเซนส์เสียเงินปะปนกัน

    • แต่ถ้าไม่จ่ายเงิน จะต้องมานั่งลบ โค้ดที่ไม่จำเป็น ออกจาก SVG เอง ซึ่งค่อนข้างยุ่งยาก

  • คำตอบหลากหลายต่อคำถามว่าไลบรารีไอคอนที่ดีที่สุดคืออะไร

    • โดยส่วนตัวคิดว่าจุดสูงสุดคือ ชุดไอคอน famfamfam Silk ราวปี 2005
      น่าเสียดายที่ไม่มีเวอร์ชันความละเอียดสูงหรือ SVG แต่ทุกวันนี้อาจใช้ AI มาช่วยเติมเต็มได้
      ดู / ดาวน์โหลด
    • แนะนำ Lucide
    • ชอบ Phosphor Icons นอกนั้นโดยทั่วไปก็ใช้ Material UI Icons
    • ฉันใช้ FlatIcon บ่อยมาก โดยหลักแล้วสำหรับ การพัฒนาเกม
    • SVGRepo เป็นมิตรกับผู้ใช้ เพราะปรับความหนาของเส้น สี และอื่น ๆ ได้เอง

  • เว็บไซต์ของฉัน universymbols.com สามารถขยายชุดไอคอนหลายชุดของ Iconify ด้วย โมเดลภาพ AI ได้
    จึงทำให้สร้าง ชุดไอคอนที่มีเอกลักษณ์มากขึ้น ได้ นอกเหนือจากชุดใหญ่แบบเดิม ๆ