devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки файлов (SVG)

48 бесплатных иконок файлов из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

file
Lucidefile
Tablerfile
Phosphorfile
Bootstrap Iconsfile-png
Material Symbolsfile
Material Design Iconsfile-x
Carbonfile-x
Lucidefile-filled
Tablerfile-bold
Phosphorfile-fill
Bootstrap Iconsfile-png-outline
Material Symbolsfile-outline
Material Design Iconsfile-up
Lucidefile-x
Tablerfile-duotone
Phosphorfile-x
Bootstrap Iconsfile-png-outline-rounded
Material Symbolsfile-cad
Material Design Iconsfile-box
Lucidefile-x-filled
Tablerfile-fill
Phosphorfile-x-fill
Bootstrap Iconsfile-png-outline-sharp
Material Symbolsfile-cog
Material Design Iconsfile-cog
Lucidefile-3d
Tablerfile-light
Phosphorfile-pdf
Bootstrap Iconsfile-png-rounded
Material Symbolsfile-cog-outline
Material Design Iconsfile-key
Lucidefile-ai
Tablerfile-thin
Phosphorfile-pdf-fill
Bootstrap Iconsfile-png-sharp
Material Symbolsfile-eye
Material Design Iconsfile-pen
Lucidefile-cv
Tablerfile-c
Phosphorfile-ppt
Bootstrap Iconsfile-eye-outline
Material Design Iconsfile-pen-line
Lucidefile-cv-filled
Tablerfile-c-bold
Phosphorfile-ppt-fill
Bootstrap Iconsfile-key
Material Design Iconsfile-isr
Tabler

Использование иконок файлов

Иконки документов обозначают файлы, вложения и отчёты; варианты с загнутым уголком или строками читаются как текстовые документы.

Все иконки здесь следуют currentColor, поэтому принимают цвет текста того элемента, в котором находятся — один SVG работает на светлом и тёмном фоне, в ссылках и кнопках. Задайте явно width и height (или управляйте размером в CSS через 1em), чтобы верстка не смещалась при загрузке страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Файл».

Лицензии

Эти иконки файлов взяты из Lucide, Tabler, Phosphor, Bootstrap Icons, Material Symbols, Material Design Icons, Carbon — наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки файлов в коммерческих целях бесплатно?
Да. Они взяты из наборов иконок с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Как изменить цвет иконки файла?
SVG используют currentColor, поэтому задайте CSS-свойство color у родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте Copy to Webflow (вставит Code Embed) или Copy JSX для React-компонента.