找找图标
file-code-bold 图标

file-code-bold SVG 图标

solarfile-code-bold

来自 Solar 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
solar:file-code-bold
中文名
—
所属集合
Solar
集合规模
8,706 枚
基础网格
24px
色彩
单色（可改色）
开源协议
CC-BY-4.0
作者
480 Design

下载 file-code-bold 图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

px
iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

file-code-bold 的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
file-code-bold 图标 浅色背景预览浅色背景
file-code-bold 图标 深色背景预览深色背景
file-code-bold 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索file-code-bold…输入框 · 前缀图标
file-code-bold导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41file-code-bold App 图标file-code-boldfile-boldfile-bold-duotonefile-brokenfile-line-duotonefile-linearfile-outlinefile-add-boldfile-add-bold-duotonefile-add-brokenfile-add-line-duotonefile-add-linear手机桌面 · App 图标
file-code-boldsolar.design/icons/file-code-bold浏览器 · 标签页与站点图标

各尺寸下的可读性

file-code-bold 图标 24px 渲染24pxfile-code-bold 图标 32px 渲染32pxfile-code-bold 图标 48px 渲染48pxfile-code-bold 图标 64px 渲染64pxfile-code-bold 图标 96px 渲染96pxfile-code-bold 图标 128px 渲染128px

复制 file-code-bold 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z"/><path fill-rule="evenodd" d="M10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14V13.5629C22 12.6901 22 12.0344 21.9574 11.5001H18L17.9051 11.5001C16.808 11.5002 15.8385 11.5003 15.0569 11.3952C14.2098 11.2813 13.3628 11.0198 12.6716 10.3285C11.9803 9.63726 11.7188 8.79028 11.6049 7.94316C11.4998 7.16164 11.4999 6.19207 11.5 5.09497L11.5092 2.26057C11.5095 2.17813 11.5166 2.09659 11.53 2.01666C11.1214 2 10.6358 2 10.0298 2C6.23869 2 4.34315 2 3.17157 3.17157C2 4.34315 2 6.22876 2 10V14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22ZM10.9697 15.4697C11.2626 15.1768 11.7374 15.1768 12.0303 15.4697L13.0303 16.4697C13.3232 16.7626 13.3232 17.2374 13.0303 17.5303L12.0303 18.5303C11.7374 18.8232 11.2626 18.8232 10.9697 18.5303C10.6768 18.2374 10.6768 17.7626 10.9697 17.4697L11.4393 17L10.9697 16.5303C10.6768 16.2374 10.6768 15.7626 10.9697 15.4697ZM10.7022 14.2633C10.8477 13.8755 10.6512 13.4432 10.2633 13.2978C9.8755 13.1523 9.44319 13.3488 9.29775 13.7367L7.79775 17.7367C7.65231 18.1245 7.84882 18.5568 8.23666 18.7022C8.6245 18.8477 9.05681 18.6512 9.20225 18.2633L10.7022 14.2633ZM7.53033 13.4697C7.82322 13.7626 7.82322 14.2374 7.53033 14.5303L7.06066 15L7.53033 15.4697C7.82322 15.7626 7.82322 16.2374 7.53033 16.5303C7.23744 16.8232 6.76256 16.8232 6.46967 16.5303L5.46967 15.5303C5.17678 15.2374 5.17678 14.7626 5.46967 14.4697L6.46967 13.4697C6.76256 13.1768 7.23744 13.1768 7.53033 13.4697Z" clip-rule="evenodd"/></g></svg>
reactReact 组件（TSX）
export function FileCodeBoldIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="currentColor"><path d="M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z"/><path fill-rule="evenodd" d="M10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14V13.5629C22 12.6901 22 12.0344 21.9574 11.5001H18L17.9051 11.5001C16.808 11.5002 15.8385 11.5003 15.0569 11.3952C14.2098 11.2813 13.3628 11.0198 12.6716 10.3285C11.9803 9.63726 11.7188 8.79028 11.6049 7.94316C11.4998 7.16164 11.4999 6.19207 11.5 5.09497L11.5092 2.26057C11.5095 2.17813 11.5166 2.09659 11.53 2.01666C11.1214 2 10.6358 2 10.0298 2C6.23869 2 4.34315 2 3.17157 3.17157C2 4.34315 2 6.22876 2 10V14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22ZM10.9697 15.4697C11.2626 15.1768 11.7374 15.1768 12.0303 15.4697L13.0303 16.4697C13.3232 16.7626 13.3232 17.2374 13.0303 17.5303L12.0303 18.5303C11.7374 18.8232 11.2626 18.8232 10.9697 18.5303C10.6768 18.2374 10.6768 17.7626 10.9697 17.4697L11.4393 17L10.9697 16.5303C10.6768 16.2374 10.6768 15.7626 10.9697 15.4697ZM10.7022 14.2633C10.8477 13.8755 10.6512 13.4432 10.2633 13.2978C9.8755 13.1523 9.44319 13.3488 9.29775 13.7367L7.79775 17.7367C7.65231 18.1245 7.84882 18.5568 8.23666 18.7022C8.6245 18.8477 9.05681 18.6512 9.20225 18.2633L10.7022 14.2633ZM7.53033 13.4697C7.82322 13.7626 7.82322 14.2374 7.53033 14.5303L7.06066 15L7.53033 15.4697C7.82322 15.7626 7.82322 16.2374 7.53033 16.5303C7.23744 16.8232 6.76256 16.8232 6.46967 16.5303L5.46967 15.5303C5.17678 15.2374 5.17678 14.7626 5.46967 14.4697L6.46967 13.4697C6.76256 13.1768 7.23744 13.1768 7.53033 13.4697Z" clip-rule="evenodd"/></g>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="currentColor"><path d="M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z"/><path fill-rule="evenodd" d="M10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14V13.5629C22 12.6901 22 12.0344 21.9574 11.5001H18L17.9051 11.5001C16.808 11.5002 15.8385 11.5003 15.0569 11.3952C14.2098 11.2813 13.3628 11.0198 12.6716 10.3285C11.9803 9.63726 11.7188 8.79028 11.6049 7.94316C11.4998 7.16164 11.4999 6.19207 11.5 5.09497L11.5092 2.26057C11.5095 2.17813 11.5166 2.09659 11.53 2.01666C11.1214 2 10.6358 2 10.0298 2C6.23869 2 4.34315 2 3.17157 3.17157C2 4.34315 2 6.22876 2 10V14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22ZM10.9697 15.4697C11.2626 15.1768 11.7374 15.1768 12.0303 15.4697L13.0303 16.4697C13.3232 16.7626 13.3232 17.2374 13.0303 17.5303L12.0303 18.5303C11.7374 18.8232 11.2626 18.8232 10.9697 18.5303C10.6768 18.2374 10.6768 17.7626 10.9697 17.4697L11.4393 17L10.9697 16.5303C10.6768 16.2374 10.6768 15.7626 10.9697 15.4697ZM10.7022 14.2633C10.8477 13.8755 10.6512 13.4432 10.2633 13.2978C9.8755 13.1523 9.44319 13.3488 9.29775 13.7367L7.79775 17.7367C7.65231 18.1245 7.84882 18.5568 8.23666 18.7022C8.6245 18.8477 9.05681 18.6512 9.20225 18.2633L10.7022 14.2633ZM7.53033 13.4697C7.82322 13.7626 7.82322 14.2374 7.53033 14.5303L7.06066 15L7.53033 15.4697C7.82322 15.7626 7.82322 16.2374 7.53033 16.5303C7.23744 16.8232 6.76256 16.8232 6.46967 16.5303L5.46967 15.5303C5.17678 15.2374 5.17678 14.7626 5.46967 14.4697L6.46967 13.4697C6.76256 13.1768 7.23744 13.1768 7.53033 13.4697Z" clip-rule="evenodd"/></g>`;
</script>
cssCSS mask（随 currentColor 改色）
.file-code-bold {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M19.3517%207.61665L15.3929%204.05375C14.2651%203.03868%2013.7012%202.53114%2013.0092%202.26562L13%205.00011C13%207.35713%2013%208.53564%2013.7322%209.26787C14.4645%2010.0001%2015.643%2010.0001%2018%2010.0001H21.5801C21.2175%209.29588%2020.5684%208.71164%2019.3517%207.61665Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2022H14C17.7712%2022%2019.6569%2022%2020.8284%2020.8284C22%2019.6569%2022%2017.7712%2022%2014V13.5629C22%2012.6901%2022%2012.0344%2021.9574%2011.5001H18L17.9051%2011.5001C16.808%2011.5002%2015.8385%2011.5003%2015.0569%2011.3952C14.2098%2011.2813%2013.3628%2011.0198%2012.6716%2010.3285C11.9803%209.63726%2011.7188%208.79028%2011.6049%207.94316C11.4998%207.16164%2011.4999%206.19207%2011.5%205.09497L11.5092%202.26057C11.5095%202.17813%2011.5166%202.09659%2011.53%202.01666C11.1214%202%2010.6358%202%2010.0298%202C6.23869%202%204.34315%202%203.17157%203.17157C2%204.34315%202%206.22876%202%2010V14C2%2017.7712%202%2019.6569%203.17157%2020.8284C4.34315%2022%206.22876%2022%2010%2022ZM10.9697%2015.4697C11.2626%2015.1768%2011.7374%2015.1768%2012.0303%2015.4697L13.0303%2016.4697C13.3232%2016.7626%2013.3232%2017.2374%2013.0303%2017.5303L12.0303%2018.5303C11.7374%2018.8232%2011.2626%2018.8232%2010.9697%2018.5303C10.6768%2018.2374%2010.6768%2017.7626%2010.9697%2017.4697L11.4393%2017L10.9697%2016.5303C10.6768%2016.2374%2010.6768%2015.7626%2010.9697%2015.4697ZM10.7022%2014.2633C10.8477%2013.8755%2010.6512%2013.4432%2010.2633%2013.2978C9.8755%2013.1523%209.44319%2013.3488%209.29775%2013.7367L7.79775%2017.7367C7.65231%2018.1245%207.84882%2018.5568%208.23666%2018.7022C8.6245%2018.8477%209.05681%2018.6512%209.20225%2018.2633L10.7022%2014.2633ZM7.53033%2013.4697C7.82322%2013.7626%207.82322%2014.2374%207.53033%2014.5303L7.06066%2015L7.53033%2015.4697C7.82322%2015.7626%207.82322%2016.2374%207.53033%2016.5303C7.23744%2016.8232%206.76256%2016.8232%206.46967%2016.5303L5.46967%2015.5303C5.17678%2015.2374%205.17678%2014.7626%205.46967%2014.4697L6.46967%2013.4697C6.76256%2013.1768%207.23744%2013.1768%207.53033%2013.4697Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M19.3517%207.61665L15.3929%204.05375C14.2651%203.03868%2013.7012%202.53114%2013.0092%202.26562L13%205.00011C13%207.35713%2013%208.53564%2013.7322%209.26787C14.4645%2010.0001%2015.643%2010.0001%2018%2010.0001H21.5801C21.2175%209.29588%2020.5684%208.71164%2019.3517%207.61665Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2022H14C17.7712%2022%2019.6569%2022%2020.8284%2020.8284C22%2019.6569%2022%2017.7712%2022%2014V13.5629C22%2012.6901%2022%2012.0344%2021.9574%2011.5001H18L17.9051%2011.5001C16.808%2011.5002%2015.8385%2011.5003%2015.0569%2011.3952C14.2098%2011.2813%2013.3628%2011.0198%2012.6716%2010.3285C11.9803%209.63726%2011.7188%208.79028%2011.6049%207.94316C11.4998%207.16164%2011.4999%206.19207%2011.5%205.09497L11.5092%202.26057C11.5095%202.17813%2011.5166%202.09659%2011.53%202.01666C11.1214%202%2010.6358%202%2010.0298%202C6.23869%202%204.34315%202%203.17157%203.17157C2%204.34315%202%206.22876%202%2010V14C2%2017.7712%202%2019.6569%203.17157%2020.8284C4.34315%2022%206.22876%2022%2010%2022ZM10.9697%2015.4697C11.2626%2015.1768%2011.7374%2015.1768%2012.0303%2015.4697L13.0303%2016.4697C13.3232%2016.7626%2013.3232%2017.2374%2013.0303%2017.5303L12.0303%2018.5303C11.7374%2018.8232%2011.2626%2018.8232%2010.9697%2018.5303C10.6768%2018.2374%2010.6768%2017.7626%2010.9697%2017.4697L11.4393%2017L10.9697%2016.5303C10.6768%2016.2374%2010.6768%2015.7626%2010.9697%2015.4697ZM10.7022%2014.2633C10.8477%2013.8755%2010.6512%2013.4432%2010.2633%2013.2978C9.8755%2013.1523%209.44319%2013.3488%209.29775%2013.7367L7.79775%2017.7367C7.65231%2018.1245%207.84882%2018.5568%208.23666%2018.7022C8.6245%2018.8477%209.05681%2018.6512%209.20225%2018.2633L10.7022%2014.2633ZM7.53033%2013.4697C7.82322%2013.7626%207.82322%2014.2374%207.53033%2014.5303L7.06066%2015L7.53033%2015.4697C7.82322%2015.7626%207.82322%2016.2374%207.53033%2016.5303C7.23744%2016.8232%206.76256%2016.8232%206.46967%2016.5303L5.46967%2015.5303C5.17678%2015.2374%205.17678%2014.7626%205.46967%2014.4697L6.46967%2013.4697C6.76256%2013.1768%207.23744%2013.1768%207.53033%2013.4697Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 file-code-bold 加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

file-code-bold 呼吸动效演示

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式
.icon-file-code-bold {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
file-code-bold 旋转动效演示

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式
.icon-file-code-bold {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

1.79 KB

1,830 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

2

<path> ×2

风格

单色（跟随 currentColor）

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 1.79 KB（1,830 字节），图元 2 个，风格为单色（跟随 currentColor）。

常见问题

关于 file-code-bold 图标的下载、商用与改色。

file-code-bold 图标是什么？▾

它是 Solar（solar）开源图标集中的 file-code-bold 图标，单色（跟随 currentColor），viewBox 为 0 0 24 24，文件仅 1.79 KB，矢量格式可无损缩放到任意尺寸。

如何下载 file-code-bold 图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

file-code-bold 图标可以商用吗？▾

该图标采用 CC BY 4.0（CC-BY-4.0） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 file-code-bold 图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

Solar 中的相近图标

file-bold
file-bold-duotone
file-broken
file-line-duotone
file-linear
file-outline
file-add-bold
file-add-bold-duotone
file-add-broken
file-add-line-duotone
file-add-linear
file-add-outline
file-cog-bold
file-cog-bold-duotone
file-cog-broken
file-cog-line-duotone
file-cog-linear
file-cog-outline
file-pen-bold
file-pen-bold-duotone
file-pen-broken
file-pen-line-duotone
file-pen-linear
file-pen-outline