Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

15 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈ ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΠΊ / Π₯Π°Π±Ρ€

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ознакомимся с 15 Π»ΡƒΡ‡ΡˆΠΈΠΌΠΈ ΠΈ ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΠΌΠΈ доступными Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ для Π²Π΅Π±-сайтов. МногиС ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ тысячи, Π° Ρ‚ΠΎ ΠΈ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ‹ ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ найдётся ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ.

Π‘Ρ€Π°Π·Ρƒ уточняСм: это Π½Π΅ 15 самых Π»ΡƒΡ‡ΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, Π° 15 ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ…. РазумССтся, Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я Π½Π΅ упомянул ΠΈΠ»ΠΈ Π½Π΅ знаю.
И, Π½Π΅Ρ‚, это Π½Π΅ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ β€” список ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π° Π½Π΅ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ.


ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ сдСлан ΠΏΡ€ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ EDISON.

ΠœΡ‹ занимаСмся Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΈ сопровоТдСниСм сайтов Π½Π° 1Π‘-Битрикс, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°Π»ΠΈ сайты ΠΈ прилоТСния для Московского ΡŽΠ²Π΅Π»ΠΈΡ€Π½ΠΎΠ³ΠΎ Π·Π°Π²ΠΎΠ΄Π°.

ΠœΡ‹ ΠΎΡ‡Π΅Π½ΡŒ любим ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ сайты! πŸ˜‰










The Noun Project β€” это громадная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, количСство ΠΊΠΎΠΈΡ…, ΠΏΠΎ слухам, ΠΏΠ΅Ρ€Π΅Π²Π°Π»ΠΈΠ»ΠΎ Π·Π° 2 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π°. Всё это создано самими участниками β€” Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ сообщСство, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒΡΡ.









iconmonstr β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰Π°Ρ Π±ΠΎΠ»Π΅Π΅ 4-Ρ… тысяч ΠΈΠΊΠΎΠ½ΠΎΠΊ, распрСдСлённых Π² Ρ‚Ρ€ΠΈ с лишним сотни Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΉ. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° поддСрТиваСтся ΠΎΠ΄Π½ΠΈΠΌ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ. ΠžΡ‡Π΅Π½ΡŒ ΠΊΡ€ΡƒΡ‚ΠΎ, Ρ‡Ρ‚ΠΎ SVG-вСрсии ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ HTML-ΠΊΠΎΠ΄Π° прямо Π½Π° сайтС, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ скачиваниС Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.









Good Stuff No Nonsense β€” ΠΈ это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Ρ‚Π°ΠΊΠΆΠ΅ созданная ΠΊΠ΅ΠΌ-Ρ‚ΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ»ΠΈΡ‡Π½ΠΎ. Всё отрисовано Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.









Π£Π½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° Orion ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ΡΡ Π² 4-Ρ… стилях:

Line, Solid, Color ΠΈ Flat.
АдаптируСтся ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° посрСдством измСняСмой Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ Π»ΠΈΠ½ΠΈΠΉ, ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π΅ΠΌ цвСтности ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ читаСмости.









Доступный ΠΈ ΠΊΠ°ΠΊ Π²Π΅Π±-сайт ΠΈ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, IcoMoon ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 4 тысяч бСсплатных ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠ΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ для Π½ΠΈΡ…. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ сразу ясно, Π½Π° ΠΊΠ°ΠΊΠΈΡ… условиях Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ использованиС. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈΠ· Π·Π½Π°Ρ‡ΠΊΠΎΠ².









ВсС Π·Π½Π°Ρ‡ΠΊΠΈ Π² Pictonic Π²Ρ‹Π΄Π΅Ρ€ΠΆΠ°Π½Ρ‹ Π² Ρ‚ΠΎΡ‡Π½ΠΎΠΌ пиксСльном ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅, благодаря Ρ‡Π΅ΠΌΡƒ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства ΠΈ цСлостности. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ΡΡ Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡ€ΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Π·Π½Π°Ρ‡ΠΊΠΈ этой ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.









Когда Π΄Π΅Π»ΠΎ касаСтся разнообразия Π² Π²Ρ‹Π±ΠΎΡ€Π΅ β€” Icons8 Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΡ€Π΅Π²Π·ΠΎΠΉΡ‚ΠΈ с Π΅Π³ΠΎ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ пополняСмым Π»Π΅Π³ΠΈΠΎΠ½ΠΎΠΌ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 85-Ρ‚ΠΈ тысячи Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Π½ΡƒΠΆΠ½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Ρ‚Π΅Π³Π°ΠΌ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΏΠΎΠ»ΠΈΡΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΈΠ· 50+ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ тСматичСских ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΉ.









Под Π΄Π²Π° ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π° бСсплатных Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… SVG, PSD, PNG, EPS ΠΈΠ»ΠΈ ICON FONT.

Высячи тысяч бСсплатных Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠ΅ΠΉ Π±Π°Π·Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎ свободной Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ ΠΎΡ‚ Flaticon!

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ просмотра рСгистрация Π½Π° сайтС Π½Π΅ Π½ΡƒΠΆΠ½Π°, Π° Π²ΠΎΡ‚ для настройки Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½ΡƒΠΆΠ½ΠΎ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒΡΡ.









Ну ΠΈ ΠΊΡƒΠ΄Π° ΡƒΠΆ Π±Π΅Π· Font Awesome, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, самой извСстной Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ.









iconscout β€” это ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° всСвозмоТныС Ρ‚Π΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. Π—Π΄Π΅ΡΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡ‚ΠΎΠΌ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ посСтитСли.









Iconfinder Π² настоящСС врСмя β€” ΠΎΠ΄Π½Π° ΠΈΠ· ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ с Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 3-мя ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π°ΠΌΠΈ бСсплатных ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Ρ‘Π½Π½Ρ‹Ρ… Π² Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 25 тысяч Π½Π°Π±ΠΎΡ€ΠΎΠ².








PixelLove β€” это Π±ΠΎΠ»Π΅Π΅ 5 тысяч ΠΈΠΊΠΎΠ½ΠΎΠΊ для ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ iOS ΠΈ Android, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΡΠΎΠ·Π΄Π°ΡŽΡ‰ΠΈΡ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ сайты ΠΈ прилоТСния.

ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ доступны Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… пиксСлСй.









Streamline Icons β€” это 10+ тысяч ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ с трСмя Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ значСниями Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ Π»ΠΈΠ½ΠΈΠΉ (Light, Regular, Bold).

53 ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, 720 ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΈ Π±ΠΎΠ»Π΅Π΅ 30 тысяч ΠΈΠΊΠΎΠ½ΠΎΠΊ.









Graphic Burger β€” это спСциализированный сайт, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ большоС количСство бСсплатных ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… графичСских элСмСнтов. ВсС Π·Π½Π°Ρ‡ΠΊΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, совмСстимы со всСми Π²ΠΈΠ΄Π°ΠΌΠΈ Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π²Π΅Π»ΠΈΠΊΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, подходящиС практичСски для любой Ρ‚Π΅ΠΌΡ‹.









Smashicons ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ с 175+ тысячами ΠΈΠΊΠΎΠ½ΠΎΠΊ. Однако, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, упомянутых Π²Ρ‹ΡˆΠ΅, Π½Π΅ всС Π·Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΡΡ‚ΠΈΠ»ΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-сайт/ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π»ΠΈ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, стоит ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ всС Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ содСрТатся Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π½Π°Π±ΠΎΡ€Π΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

ВСликолСпная дСсятка Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ β€” Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½Π° vc.ru

4336 просмотров

ΠŸΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‡ΠΈΠΊ Π½Π΅ нСсёт отвСтствСнности Π·Π° содСрТаниС ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Ρ‰Π΅ большС ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈ Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π² нашСм Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ-ΠΊΠ°Π½Π°Π»Π΅ ΠΏΠΎ ссылкС: https://t.me/metsolution

ΠŸΠ΅Ρ€Π΅Π²Ρ‘Π»: Π›Π΅Π±Π΅Π΄Π΅Π² Π”Π°Π½ΠΈΠΈΠ»

ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»:Zoltan Szogyenyi: 10 open source SVG icon libraries that you can use for your next project

Как-Ρ‚ΠΎ Ρ€Π°Π· я ΠΏΡ€ΠΎΠ²Π΅Π» опрос Π½Π° Reddit ΠΈ обратился ΠΊ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ с простой ΠΏΡ€ΠΎΡΡŒΠ±ΠΎΠΉ: ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ названиями Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ИдСя нашла ΠΆΠΈΠ²ΠΎΠΉ ΠΎΡ‚ΠΊΠ»ΠΈΠΊ Ρƒ сообщСства, ΠΈ вскорС я ΠΎΡ‚ΠΊΡ€Ρ‹Π» для сСбя ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π°Π½ΡŒΡˆΠ΅ ΠΈ понятия Π½Π΅ ΠΈΠΌΠ΅Π». И Π²ΠΎΡ‚ я Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΎ 10 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈΠ· Π½ΠΈΡ… Π½Π° основС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ опроса.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Ρ‹ условия лицСнзирования всСх упомянутых Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ всС ΠΎΠ½ΠΈ общСдоступны.

Π‘Ρ‚ΠΎΠΈΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ пСрСчислСнныС Π½ΠΈΠΆΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ соврСмСнный ΠΈ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π˜Ρ‚Π°ΠΊ, наша вСликолСпная 10-ΠΊΠ°:

Font Awesome

Π‘ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· вас хотя Π±Ρ‹ Ρ€Π°Π· использовали ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых ΠΏΠ΅Ρ€Π²Ρ‹Ρ… популярных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. Π’ настоящСС врСмя Π΅Π΅ галСрСя содСрТит Π² Ρ†Π΅Π»ΠΎΠΌ 1588 бСсплатных ΠΈ 7 842 ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ.

Font Awesome ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎ являСтся ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΡ‡ΠΈΠ½ большой вострСбованности этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. На нашСм Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome Pro, ΠΈ ΠΌΡ‹ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ благодаря ΠΈΠΌ ΠΎΠ½ Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ выдСляСтся Π½Π° Ρ„ΠΎΠ½Π΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Ρ… сайтов.

Font Awesome ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ β€” созданиС ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ссылки Π½Π° CDN ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚Π° (Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ сСрвисС). Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ условиС для ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ использования Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ….

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ°Ρ€Ρƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ скопировав ΠΊΠΎΠ΄ SVG.

Π― Π±Ρ‹ Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ посовСтовал это Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ большС 20–30 Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½Π° сайтС.

БущСствуСт ΠΌΠ½ΠΎΠ³ΠΎ способов использования возмоТностСй Font Awesome: ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ источника SVG ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠ»ΠΈ использованиС ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΈΡ… ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CDN. Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ прСкрасная страница, которая ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Font Awesome.

2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Ionicons

Ionicons.io β€” Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° SVG с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, содСрТащая 457 ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ‚Ρ€Π΅Ρ… Ρ€Π°Π·Π½Ρ‹Ρ… стилях: ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹Π΅, Π·Π°Π»ΠΈΠ²Π½Ρ‹Π΅ ΠΈ заострСнныС. Π—Π΄Π΅ΡΡŒ ΠΌΠ½Π΅ особСнно нравится простой ΠΈ понятный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² ΠΈ Ρ„ΠΎΡ€ΠΌ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² своСм Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅?

ИспользованиС Ionicons сопровоТдаСтся Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° вся Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° вмСсто ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ SVG ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ скрипт Π² Ρ„ΡƒΡ‚Π΅Ρ€ (Π½ΠΈΠΆΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ сайта):

<script src=Β»https://unpkg.com/[email protected]/dist/ionicons.jsΒ»> </script>

ПослС этого просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ элСмСнт Π² HTML-шаблон ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name Π² соотвСтствии с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<ion-icon name=Β»heartΒ»></ion-icon>

На ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС содСрТится Π±ΠΎΠ»Π΅Π΅ подробная информация ΠΎΠ± основных ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… использования.

2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

CSS.gg

Если Π²Ρ‹ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ участвуСтС Π² ΠΆΠΈΠ·Π½ΠΈ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° Reddit, Ρ‚ΠΎ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π΅ оставили Π±Π΅Π· внимания Ρ„Π°ΠΊΡ‚ появлСния Π½ΠΎΠ²ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅ΠΉ для стиля Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΠ½Π° насчитываСт ΡΠ²Ρ‹ΡˆΠ΅ 704 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, распрСдСлСнных ΠΏΠΎ Ρ‚Π°ΠΊΠΈΠΌ катСгориям, ΠΊΠ°ΠΊ увСдомлСния, ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ (стрСлки), ΠΊΠΎΠ΄, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π’ своС врСмя Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ споров ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ: CSS ΠΈΠ»ΠΈ SVG. Но ΠΏΠΎΠ·Π΄Π½Π΅Π΅ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ @astritmalsija запустил Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ SVG, SVG Sprite, Figma ΠΈ Adobe XD для Π²Ρ‚ΠΎΡ€ΠΎΠΉ вСрсии, ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ² Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΉ.

ΠΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с CSS.gg ΠΎΡ‡Π΅Π½ΡŒ просто: Π½Π°Π΄ΠΎ лишь Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ npm -i css.gg ΠΈ Π·Π°Ρ‚Π΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй Π² Ρ‚Π΅Π³ head:

<link href=’https://css.gg/css’ rel=’stylesheet’>

Π’Π°ΠΊΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ CDN, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ UNPKG ΠΈΠ»ΠΈ JSDelivr:

<!β€” UNPKG β€”> <link href=’https://unpkg. com/css.gg/icons/all.css’ rel=’stylesheet’> <!β€” JSDelivr β€”> <link href=’https://cdn.jsdelivr.net/npm/css.gg/icons/all.css’ rel=’stylesheet’>

Π‘ΠΎΠ»Π΅Π΅ подробная информация ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ использованиС CSS.gg, содСрТится Π² инструкциях ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ рСпозитория Π½Π° Github.

2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Feathericons

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ Π²Π°ΠΌ Feathericons, внСшнС ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈ понятно ΡƒΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ с 282 SVG ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΅Π΅ основным Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ являСтся SVG, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΠ½ являСтся самым быстрым способом Ρ€Π°Π±ΠΎΡ‚Ρ‹ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΡˆΡ‚Ρ€ΠΈΡ…Π° ΠΈ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΡ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ ΠΈ свСтлый Ρ€Π΅ΠΆΠΈΠΌΡ‹ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ Π»ΡƒΠ½Ρ‹ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π²Π΅Π±-сайта.

Для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Feathericons Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» SVG ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π²Π°ΡˆΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ src, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π³ΠΎ Π² качСствС встроСнного ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° SVG.

2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Eva Icons ❀

Eva Icons β€” это Π½Π°Π±ΠΎΡ€ ΠΈΠ· 480 искусно Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… SVG ΠΈ PNG. Для создания Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π΄Π²Π° основных стиля: ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹ΠΉ ΠΈ Π·Π°Π»ΠΈΠ²Π½ΠΎΠΉ. Π Π°Π΄ΡƒΠ΅Ρ‚ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° Π·Π½Π°Ρ‡ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°, ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ Π²ΠΈΠ±Ρ€Π°Ρ†ΠΈΡŽ.

Π Π°Π±ΠΎΡ‚Π° с Eva Icons начинаСтся с Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»Π° SVG/PNG послС Π²Ρ‹Π±ΠΎΡ€Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ†Π΅Π»ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Eva Icons, установив ΠΏΠ°ΠΊΠ΅Ρ‚ npm ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

npm i eva-icons

2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Heroicon

Heroicons, очСрСдная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, являСтся ΠΈΡ‚ΠΎΠ³ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹ создатСлСй Tailwind CSS. Она содСрТит 165 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹Π΅ ΠΈ Π·Π°Π»ΠΈΠ²Π½Ρ‹Π΅, ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ ΠΈ ΡΠ²Π΅Ρ‚Π»ΡƒΡŽ вСрсии ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π·Π½Π°Ρ‡ΠΊΠΎΠ² качСствСнно ΠΈ искусно ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½.

ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ начинаСтся с наТатия Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π½ΠΈΡ… ΠΈ копирования встроСнного ΠΊΠΎΠ΄Π° SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сразу ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Ρ‰Π΅ ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдлагаСтся Π² Figma. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ всС Ρ„Π°ΠΉΠ»Ρ‹ SVG с общСдоступного рСпозитория.

  1. Π”Π΅ΠΌΠΎ.
  2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Bootstrap icons

Данная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡΠ²Ρ‹ΡˆΠ΅ 600 ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ SVG. На ΠΌΠΎΠΉ взгляд, ΠΎΠ½Π° Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ отличаСтся ΠΎΡ‚ всСх Π΄Ρ€ΡƒΠ³ΠΈΡ… с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Если Π²Π°ΠΌ нравится ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Bootstrap ΠΊΠ°ΠΊ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Ρ‚ΠΎ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Bootstrap 5 Icons ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² свой ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Bootstrap 5 Icons Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ SVG, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ: Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ°ΠΊ встроСнный ΠΊΠΎΠ΄, Π»ΠΈΠ±ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π² качСствС источника для ΠΎΠ±Ρ€Π°Π·Π°, Π»ΠΈΠ±ΠΎ создавая классы псСвдокода Π² CSS. Какой Π±Ρ‹ способ Π²Ρ‹ Π½Π΅ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ, Π½Π° сайтС Π΅ΡΡ‚ΡŒ информация ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ….

  1. Π”Π΅ΠΌΠΎ.
  2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Remix Icon

Remix Icon β€” это большая коллСкция ΠΈΠ· 2149 красивых ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎΠ΄ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ Apache. Они распрСдСлСны ΠΏΠΎ Ρ‚Π°ΠΊΠΈΠΌ катСгориям, ΠΊΠ°ΠΊ бизнСс, ΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅, финансы, ΠΊΠ°Ρ€Ρ‚Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ заслуТиваСт вашСго внимания.

НачинаСм Ρ€Π°Π±ΠΎΡ‚Ρƒ с Remix Icon Π»ΠΈΠ±ΠΎ с Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ вСрсий SVG ΠΈΠ»ΠΈ PNG, Π»ΠΈΠ±ΠΎ с копирования встроСнного ΠΊΠΎΠ΄Π° SVG Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π°. Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ вСсь ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» .svg ΠΈΠ»ΠΈ SVG-спрайт.

  1. Π”Π΅ΠΌΠΎ.
  2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Octicons

Octicons β€” Π½Π°Π±ΠΎΡ€ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ 100 ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Github ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π° своСм Π³Π»Π°Π²Π½ΠΎΠΌ сайтС. Насколько ΠΌΠ½Π΅ извСстно, ΠΎΠ½ΠΈ ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Π΄ Π²Ρ‚ΠΎΡ€ΠΎΠΉ вСрсиСй Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π΄ΠΎΠ±ΠΈΠ²Π°ΡŽΡ‚ΡΡ разнообразия ΠΈΠΊΠΎΠ½ΠΎΠΊ.

ΠžΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ прСимущСство Octicons состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ Π² React, Ruby, Rails, Jekyll ΠΈ JavaScript. Π—Π΄Π΅ΡΡŒ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ список всСх ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Octicons.

  1. Π”Π΅ΠΌΠΎ.
  2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Ikonate

Π—Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ наш список Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ интСрСсная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ikonate, содСрТащая ΠΎΠΊΠΎΠ»ΠΎ 100 качСствСнных ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² плоском Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Она находится ΠΏΠΎΠ΄ вСсьма лояльной ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ MIT.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΠΈ закруглСния Π³Ρ€Π°Π½ΠΈΡ†, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΡ… экспортом. Π’ экспортируСмом Ρ„Π°ΠΉΠ»Π΅ ZIP Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ HTML-Ρ„Π°ΠΉΠ» со всСми Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌΠΈ встроСнными Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΏΠ°ΠΏΠΊΡƒ с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ SVG ΠΈ спрайт-листом.

  1. Π”Π΅ΠΌΠΎ.
  2. Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° Github.

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΡˆΡƒ вас ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, присудив ΠΈΠΌ Π·Π²Π΅Π·Π΄Ρƒ Π½Π° Github ΠΈ Ρ‚Π΅ΠΌ самым ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠ² Ρ‚Ρƒ Π½Π΅ΠΎΡ†Π΅Π½ΠΈΠΌΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚. ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ этим списком с вашими Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ, Ссли Π²Ρ‹ сами Π΅Ρ‰Π΅ Π½Π΅ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ для вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

10 прСкрасных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ c SVG-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ

ΠœΡ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠ»ΠΈ всС условия лицСнзирования, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ ΡΠΎΠΌΠ½Π΅Π²Π°Ρ‚ΡŒΡΡ – Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠ· этой ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠΈ общСдоступны. И, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΠΎ, каТдая ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Π”Π°ΠΆΠ΅ Π½Π΅ сомнСваюсь, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΈΠ· вас ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· Font Awesome, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ срСди ΠΏΠ΅Ρ€Π²Ρ‹Ρ… ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΎΠ½Π° стала ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых популярных. БСйчас Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ Font Awesome содСрТится большС 1500 бСсплатных ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ 7850 ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎ ΠΈ сдСлало Π΅Π΅ Ρ‚Π°ΠΊΠΎΠΉ вострСбованной. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ CDN-ссылку (Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚Π° Π½Π° Π΄Π°Π½Π½ΠΎΠΌ сСрвисС). Благодаря этому ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ задания условий ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΌΠΈ. ЕстСствСнно, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ нСсколько ΠΈΠΊΠΎΠ½ΠΎΠΊ, просто скопировав SVG-ΠΊΠΎΠ΄ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ для сайта Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ большС 2-3 дСсятков Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Бсылки:

  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹. 
  • Demo.
  • Github.

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° SVG Ρ‚ΠΎΠΆΠ΅ открытая, содСрТит большС 450 ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π½Π° 3 Ρ€Π°Π·Π½Ρ‹Ρ… стиля. ОсобСнно ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° наш взгляд являСтся простой ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

Π Π°Π±ΠΎΡ‚Π° с Ionicons Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Когда Π²Π°ΠΌ трСбуСтся вся Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Π° Π½Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π² Ρ„ΡƒΡ‚Π΅Ρ€ (Π½ΠΈΠΆΠ½ΠΈΠΉ элСмСнт страницы) Ρ‚Π°ΠΊΠΎΠΉ скрипт:

Π”Π°Π»ΡŒΡˆΠ΅ Π²Π°ΠΌ останСтся просто Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ элСмСнт Π² ΠΊΠΎΠ΄ HTML, ΡƒΠΊΠ°Π·Π°Π² Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ β€œname” ΠΈΠΊΠΎΠ½ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Бсылки:

  • ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ сайт;
  • Demo;
  • Github.

АктивныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Reddit навСрняка Π·Π½Π°ΡŽΡ‚ ΠΎ появлСнии Π½ΠΎΠ²ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ CSS.gg, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ для стиля ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS. БСйчас Π² Π½Π΅ΠΉ большС 700 ΠΈΠΊΠΎΠ½ΠΎΠΊ, рассортированных ΠΏΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ катСгориям: стрСлки, ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΠ΄, ΠΌΡƒΠ·Ρ‹ΠΊΠ° ΠΈ Π΄Ρ€. 

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ врСмя Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ споров Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ: с Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS ΠΈΠ»ΠΈ всС-Ρ‚Π°ΠΊΠΈ SVG? Однако ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π²ΠΎ II Π²Π΅Ρ€ΡΠΈΡŽ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ» Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ SVG, Π½ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹: Adobe XD, SVG Sprite ΠΈ Figma, прСдоставив ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΅Ρ‰Π΅ больший Π²Ρ‹Π±ΠΎΡ€.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΎΠΊ совсСм Π½Π΅ слоТно. ПослС выполнСния ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Β«npm -i css.ggΒ» Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Ρ‚Π΅Π³ head Ρ‚Π°ΠΊΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй:

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ CDN: UNPKG ΠΈ JSDelivr:

Бсылки:

  • Demo.
  • Github.

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° содСрТит всСго 282 SVG-ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π·Π°Ρ‚ΠΎ внСшнС ΠΎΠ½Π° ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π° ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ понятна Π΄Π°ΠΆΠ΅ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌ. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ стоит SVG, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСйчас это самый скоростной способ использования Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ (Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ ΠΏΡ€.), ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ, Π»ΠΈΠ±ΠΎ свСтлый Ρ€Π΅ΠΆΠΈΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π»ΡƒΠ½Ρ‹, располоТСнной с ΠΏΡ€Π°Π²ΠΎΠΉ стороны Π²Π²Π΅Ρ€Ρ…Ρƒ сайта.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Feathericons, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ SVG-Ρ„Π°ΠΉΠ» ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² свою Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ.

  • Demo.
  • Github.

Π’ Π½Π°Π±ΠΎΡ€ Eva Icons Π²Ρ…ΠΎΠ΄ΠΈΡ‚ 480 качСствСнных SVG- ΠΈ PNG-ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ доступом. Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ ΠΎΠ½ΠΈ прСимущСствСнно Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π΄Π²ΡƒΡ… стилСй: Π·Π°Π»ΠΈΠ²Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹ΠΉ. НСльзя Π½Π΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт Π·Π½Π°Ρ‡ΠΊΡƒ, просто навСдя Π½Π° Π½Π΅Π³ΠΎ курсор ΠΌΡ‹ΡˆΠΈ: ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΡŽ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π²ΠΈΠ±Ρ€Π°Ρ†ΠΈΡŽ ΠΈ Π΄Ρ€.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ SVG ΠΈΠ»ΠΈ PNG Ρ„Π°ΠΉΠ» послС Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠ° ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π°Π±ΠΎΡ€Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ npm: npm i eva-icons.

Бсылки:

  • Demo.
  • Github.

Open source Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΎΡ‚ Π°Π²Ρ‚ΠΎΡ€ΠΎΠ² Tailwind CSS. Бостоит ΠΈΠ· 165 ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ€Π°Π·Π½Ρ‹Ρ… стилСй с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ ΠΈΠ»ΠΈ ΡΠ²Π΅Ρ‚Π»ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ любого элСмСнта. Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½ ΠΎΡ‡Π΅Π½ΡŒ искусно.

Для использования ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… Π½Π°ΠΆΠΈΠΌΠ°ΠΉΡ‚Π΅ Π½Π° Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ встроСнный SVG-ΠΊΠΎΠ΄. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ  Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° доступна Π² Figma. ΠŸΡ€ΠΈ нСобходимости Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ вСсь Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ с рСпозитория SVG-Ρ„Π°ΠΉΠ»Ρ‹.

Бсылки:

  • Π”Π΅ΠΌΠΎ.
  • Github.

Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ большС ΡˆΠ΅ΡΡ‚ΠΈ сотСн ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ, ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, ΠΏΠΎ Π½Π°ΡˆΠ΅ΠΌΡƒ мнСнию, Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ выдСляСтся срСди Π°Π½Π°Π»ΠΎΠ³ΠΎΠ² благодаря ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ. ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Bootstrap Π² качСствС CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Bootstrap 5 Icons.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, скопируйтС SVG-ΠΊΠΎΠ΄, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π»ΡŽΠ±Ρ‹ΠΌ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ способом (ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° сайтС). 

Бсылки:

  • Demo.
  • Github.

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ большая коллСкция, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π°Ρ большС 2 тысяч красивых ΠΈΠΊΠΎΠ½ΠΎΠΊ. Они сгруппированы ΠΏΠΎ катСгориям: Π΄ΠΈΠ·Π°ΠΉΠ½, бизнСс, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, ΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅, дСвайсы ΠΈ Π΄Ρ€. Π­Ρ‚Π° открытая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ заслуТиваСт внимания.

Если Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Remix Icon, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ вСрсии SVG/PNG, ΠΈΠ»ΠΈ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΠ»ΠΈΠΏΠ±ΠΎΡ€Π΄ встроСнный SVG-ΠΊΠΎΠ΄. А Π΅Ρ‰Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ .svg Π»ΠΈΠ±ΠΎ спрайта.

Бсылки:

  • Demo.
  • Github.

Π—Π΄Π΅ΡΡŒ Π΅ΡΡ‚ΡŒ большС сотни ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° основном сайтС Github. Π•ΡΡ‚ΡŒ информация, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ ΠΈΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ, Π²Ρ‚ΠΎΡ€ΠΎΠΉ вСрсиСй Octicons, с ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ большим Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠΌ прСимущСством Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Сю ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΌ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ Π² Ρ‚Π°ΠΊΠΈΡ… языках, ΠΊΠ°ΠΊ React, JS, Ruby ΠΈ Rails. 

Бсылки:

  • ΠŸΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ всСх ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ.
  • Demo.
  • Github.

Π’ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ списка ΠΈΠ΄Π΅Ρ‚ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ интСрСсная, Ρ‡Π΅ΠΌ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ikonate, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΅ΡΡ‚ΡŒ ΠΎΠΊΠΎΠ»ΠΎ сотни качСствСнных ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… Π² Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΠΌ плоском Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π•Π΅ лицСнзия MIT достаточно лояльна.

ΠŸΠ΅Ρ€Π΅Π΄ экспортом ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π³Ρ€Π°Π½ΠΈΡ† ΠΈ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ ZIP-Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ со всСми Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅, ΠΏΠ°ΠΏΠΊΡƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… SVG-Ρ„Π°ΠΉΠ»ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ спрайт-лист.

Бсылки:

  • Demo.
  • Github.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Zoltan Szogyenyi: 10 open source SVG icon libraries that you can use for your next project

ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome

Полная сборка ΠΈΠ· 675 ΠΈΠΊΠΎΠ½ΠΎΠΊ Font Awesome 4. 7.0

Как Π²Ρ‹ ΠΈ просили, Font Awesome Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя 41 Π½ΠΎΠ²ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² вСрсии 4.7. Как Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ? Π”Π° Π²ΠΎΡ‚ Ρ‚Π°ΠΊ. НуТна вСрсия Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π΅ ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Font Awesome Ρƒ сСбя Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅? ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΡƒ.