Svg иконки форматов файлов
Обновлено: 07.07.2024
File Icon Images
A collection of file type/extension SVG icons, available free for use in your applications.
- Please post feedback or issues.
- I pay to license several of the icons used in these sets. Donations are appreciated.
- 💡 If you have an idea, such as new icon requests, additional collections/designs, and/or are willing to contribute a library/design, please let me know! My time is limited, but I will get to it eventually.
- ⭐ If you use these icons to create something cool, tell me about it!
Currently, there are three icon sets in the dist/icons directory:
- Classic - An expansion of the Redboot free-file-icons designs.
- Vivid - Inspired by Erlen Masson
- Square Outline (in progress) - Modified from and inspired by Cotne Nazarashvili
Next release:
- Over 500 new icons
- A new set for dark backgrounds (preview)
- CDNJS hosting
Once that is released, I'd like to focus on a webfont, ideally where you can create your own file icons with stacking, just like Font Awesome.
🚨 NB! Because I didn't use semver, the current release is not available from Bower. It will be corrected with the next release.
(I know, it doesn't below on Packagist, but 15% of my downloads are coming from there, so some people must prefer it.)
To display a file icon, simply link to one or all of the icon set CSS files in the css directory:
jsDelivr allows you to combine multiple files. Below is an example of linking both the Vivid and Square Outline sets with one URI:
This will become more beneficial with future releases that contain supplementary packs, web fonts, etc.
Supports branches as endpoints (such as master ).
If you're using WordPress, you can load the icons by adding the following line to your theme's functions.php file:
Each set has its own CSS prefix:
- cla - Classic
- viv - Vivid
- sqo - Square Outline
The format for CSS classes is fiv-[prefix]-[extension] :
If you want to override the size of the icons, you can do so with CSS:
Alternatively, you may also use .fiv-size-md , .fiv-size-lg and .fiv-size-xl to modify the icon sizes:
Each icon set has a catalog.json file that includes all icons included in the library. You can optionally use this to check for files that exist, and where missing, set an alternate icon.
Generic icons include blank.svg , folder.svg , image.svg .
🚨 BREAKING CHANGE: I will be removing the generic folder.svg from each collection in favor of the upcoming "Extra" set. Follow this repo if you'd like to be notified when that happens.
Even though I'm paying for them, thanks also to Adobe, The Noun Project, FlatIcon, Icons8 and iconscout for providing great tools and services. 👍 😄
All icons used in the creation of this library were licensed MIT, Creative Commons (attribution) or purchased royalty-free. Any exceptions noted below. All logos are copyright their respective owners.
If you feel that you have a copyright issue, please feel free to report it.
Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).
Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется.
Иконка
Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.
Тач-иконки
Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180 , и атрибут sizes лишний.
Манифест
Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.
Значок используется Android и Chrome. Нужен только самый большой размер 512 x 512.
theme-color meta по-прежнему требуется для цвета иконки в Chrome и Android.
Готово
Вот и все, что вам нужно для современных браузеров, все остальное не нужно. msapplication-TileImage можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется apple-touch-icon . TileColor больше не используется.
Все остальное
К сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.
Темный режим
В заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать со mask-icon , так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.
Перевёл: Лебедев Даниил
Как-то раз я провел опрос на Reddit и обратился к коллегам-разработчикам с простой просьбой: поделиться названиями любимых библиотек иконок. Идея нашла живой отклик у сообщества, и вскоре я открыл для себя много отличных библиотек с открытым исходным кодом, о которых раньше и понятия не имел. И вот я решил написать статью о 10 лучших из них на основе результатов проведенного опроса.
Предварительно были проверены условия лицензирования всех упомянутых в статье библиотек, так что можете быть уверены, что все они общедоступны. Стоит также отметить, что перечисленные ниже библиотеки должны иметь современный и актуальный дизайн. Итак, наша великолепная 10-ка:
Более чем уверен, что большинство из вас хотя бы раз использовали иконки Font Awesome, одной из самых первых популярных библиотек с открытым кодом. В настоящее время ее галерея содержит в целом 1588 бесплатных и 7 842 платных иконок.
Font Awesome предлагает огромную коллекцию разнообразных иконок, что является одной из главных причин большой востребованности этой библиотеки. На нашем веб-сайте используются двухцветные иконки Font Awesome Pro, и мы уверены, что благодаря им он выгодно выделяется на фоне аналогичных сайтов.
Font Awesome предлагает еще одну интересную возможность — создание персональной ссылки на CDN при наличии аккаунта (на соответствующем сервисе). Это позволит вам задать условие для исключения обычных иконок и использования только двухцветных.
Конечно, вы также можете включить только пару иконок, напрямую скопировав код SVG. Я бы настоятельно посоветовал это делать при условии, что вы не используете больше 20–30 значков на сайте.
Существует много способов использования возможностей Font Awesome: копирование источника SVG одной иконки, загрузка библиотеки или использование общего или их персонального CDN. У них есть прекрасная страница, которая поможет начать работу с Font Awesome.
Ionicons.io — еще одна библиотека SVG с открытым кодом, содержащая 457 иконок в трех разных стилях: контурные, заливные и заостренные. Здесь мне особенно нравится простой и понятный дизайн контуров и форм. Почему бы не использовать их в своем будущем проекте?
Использование Ionicons сопровождается хорошей документацией. Если вам нужна вся библиотека вместо отдельной SVG иконки, можете включить следующий скрипт в футер (нижний блок сайта):
После этого просто добавьте следующий элемент в HTML-шаблон и измените атрибут name в соответствии с иконкой, которую хотите показать, вот таким образом:
На официальном сайте содержится более подробная информация об основных правилах использования.
С иллюстрациями разобрались, переходим к иконкам. Все знают Noun Project и Flaticon. Отличные сайты, но часто нужно, чтобы иконки были в одном стиле. Ловите большие наборы иконок (от 260 до 9000+), чтобы «консистенси» ваших през, сайтов или приложений было на высоте.
1185 иконок от IconScout. Формат: SVG. Можно качнуть полный пак с GitHub. Коммерческое и некоммерческое использование при указании авторства. Apache License 2.0.
9888+ иконок. Форматы: PNG, SVG. Можно использовать в коммерческих и некоммерческих проектах, но обязательна ссылка на сайт. Полный текст лицензии.
260 иконок. Формат: PPTX. Иконки полностью редактируемы внутри PowerPoint: меняйте цвет заливки, обводки, размер.
350 иконок в мультяшном стиле. Форматы: PNG, SVG, TTF, EPS, PSD. Использование в любых целях, ссылка на источник обязательна. Лицензия CC BY-SA.
500 анимированных иконок от Icons8. Форматы: GIF, AE. Можно использовать в коммерческих и некоммерческих проектах при указании ссылки на источник. Полный текст лицензии.
1588 иконок. Форматы: PNG, SVG, TTF. Можно скачать целиком с GitHub. Любое использование и модификация, указание источника обязательно. Полный текст лицензии.
2000+ иконок от Google. Форматы: PNG, SVG. Полный набор качается с GithHub. Коммерческое и некоммерческое использование при указании авторства. Apache License 2.0.
230 трехмерных иконок в изометрическом стиле. Формат: PNG. Бесплатно доступно только некоммерческое использование с указанием ссылки на сайт.
800+ иконок от Amazon. Форматы: PNG, SVG, PPTX, EPS. Иконки на тему IT. Для светлого и темного фонов. Явного запрета на использование не клиентами AWS не обнаружил, но это не значит, что его нет. Используйте на свой страх и риск.
1800 иконок. Форматы: PNG, SVG, EPS. Щедрый подгон от Alexandru Stoica. Лицензии, судя по всему, нет, автор просто выложил иконки в своем Dribbble и разрешил делать с ними что угодно.
Кстати, в моем телеграм-дневнике полно всякой эксклюзивной информации о фишках PowerPoint, а также мой бесценный опыт за 5 лет создания презентаций для всяких там корпораций и не только. Например, узнайте главное правило иконок.
Flaticon — любовь навсегда! Найдётся любая иконка)
Download all icons in SVG, PSD, PNG, EPS format or as webfontsС тех пор, как они убрали поддержку десктопного приложения, сайт стал нахуй не нужон
У Icons8 есть не только анимированные. Статичных iOS иконок больше 10к и это только один из 20+ стилей. И ещё они просто очень хорошие ребята.
Designers, download the design stuff for free — icons, photos, UX illustrations, and music for…I8 крутые, но они мне показались достаточно популярными, чтобы не включать их в пост. Хотелось поделиться не самыми очевидными ресурсами. Да и вроде бесплатно не всегда вектор отдают. ред.
А я вас понял! да, всё верно)
То, что лицензии нет, как раз говорит о том, что она неизвестна публично на сайте, а может быть коммерческой, использовать не стоит или ун после запроса условий лицензии ее у автора по почте
Спасибо, поправил пост.
Уже к иллюстрациям был комент про моего бота t.me/deshelp_bot
К иконкам он так же относится.
Материал в статье так себе, лучше использовать бота и присылать мне находки, я их загружу в бота. Нежели по 10 иконок на статью выложить и набрать лайки)
Откровенно говоря, вашим ботом пользоваться неудобно, это просто длиннююююююющий список сайтов. Мне что каждый раз идти по этому списку? А как мне не промахнуться по нужной ссылке? Не надо повсюду за мной ходить и писать про своего бота :)
Да, в сети миллион сайтов с иконками, но я отфильтровал: только качественные, бесплатные и чтобы много (в среднем в каждом наборе нск тысяч иконок). Чувствуете разницу между отборным контентом с превью для удобства и тупо свалкой ссылок? ред.
Ссылки из статьи так себе либо уже есть в боте. Ну ок, без превью. 🤷🏻♂️
так себе либо уже есть в боте
то есть если в вашем чудоботе ссылки нет, то так себе, ну ок :)
бот кстати не работает сейчас
Я добавить то могу, но считаю, что некоторые иконки из статьи не заслуживают места в боте. К тому же, часть всё же есть в боте)
Это бессмысленный спор. Мне не нравится ваша статья - я минусанул. Вам не нравится бот - не пользуйтесь.
Всё)
И минус поставили и бота своего порекламировали) Красиво! Не нравится пост - дело вкуса, минусите и проходите мимо. Зачем спамить своим ботом. ред.
Над превью уже работаю, просто сайтов много, поэтому так долго)
Какой конкретно?
Про дизайн презентаций?
История про то, как шипастый кнут оказался эффективнее нежных слов в дрессировке дедлайнов и людей, да вот только пряник в этом деле подействовал куда лучше
Читайте также: