找找图标
csdn 图标

csdn SVG 图标

simple-iconscsdn

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

图标 ID
simple-icons:csdn
中文名
—
所属集合
Simple Icons
集合规模
3,467 枚
基础网格
24px
色彩
单色（可改色）
开源协议
CC0-1.0
作者
Simple Icons Collaborators

下载 csdn 图标

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

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

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

csdn 的预览与使用场景

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

预览颜色
csdn 图标 浅色背景预览浅色背景
csdn 图标 深色背景预览深色背景
csdn 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索csdn…输入框 · 前缀图标
csdn导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41csdn App 图标csdn手机桌面 · App 图标
csdnsimple-icons.design/icons/csdn浏览器 · 标签页与站点图标

各尺寸下的可读性

csdn 图标 24px 渲染24pxcsdn 图标 32px 渲染32pxcsdn 图标 48px 渲染48pxcsdn 图标 64px 渲染64pxcsdn 图标 96px 渲染96pxcsdn 图标 128px 渲染128px

复制 csdn 图标代码

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

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.693 13.638c-.497.568-1.363.63-1.712.63c-.648 0-1.144-.164-1.474-.488c-.313-.307-.478-.76-.489-1.346c-.025-1.358.744-2.762 2.074-2.762c.635 0 1.124.455 1.311.644a.34.34 0 0 0 .282.099a.38.38 0 0 0 .241-.159c.068-.087.135-.237.138-.401s-.057-.344-.243-.49a2.64 2.64 0 0 0-1.668-.591c-.819 0-1.627.376-2.218 1.033c-.621.691-.953 1.63-.935 2.646c.015.815.282 1.5.773 1.982c.528.518 1.3.791 2.235.791c1.097 0 1.776-.325 2.154-.597a.58.58 0 0 0 .24-.456a.7.7 0 0 0-.208-.497c-.23-.248-.448-.101-.503-.037Zm4.97-2.15a8 8 0 0 0-.698-.248q-.237-.072-.45-.131c-.922-.26-1.027-.5-1.017-.68c.022-.363.515-.853 1.352-.792c.607.045 1.015.509 1.205.781c.149.214.371.135.434.095a.6.6 0 0 0 .309-.514a.63.63 0 0 0-.209-.488a2.654 2.654 0 0 0-3.347-.273c-.456.323-.744.772-.77 1.202c-.064 1.061 1.015 1.366 1.803 1.588c.214.061.429.127.667.202c1.14.357 1.173.717 1.092 1.267c-.082.556-.696.834-1.685.761c-1.029-.076-1.464-.61-1.612-.901c-.05-.098-.205-.248-.413-.156c-.514.229-.473.731-.26.993c.339.416 1.15 1.035 2.667 1.035c1.734 0 2.255-.875 2.378-1.64c.092-.572-.022-1.028-.348-1.396c-.236-.267-.592-.495-1.101-.706Zm6.777-2.165c-.598-.431-1.393-.61-2.36-.532c-.712.058-1.274.243-1.335.263l-.006.002a.44.44 0 0 0-.297.379l-.47 5.201a.34.34 0 0 0 .247.35l.072.02l.066.018l.086.021a8 8 0 0 0 1.64.183c.972 0 1.765-.23 2.36-.684c.764-.583 1.141-1.5 1.118-2.725c-.021-1.135-.398-1.974-1.121-2.495Zm-.662 4.461c-.836.639-2.09.562-2.677.481a.13.13 0 0 1-.109-.137l.397-4.248a.11.11 0 0 1 .086-.1c.999-.241 1.777-.168 2.312.218c.189.137.348.331.471.568c.176.339.277.765.286 1.234c.017.916-.24 1.583-.765 1.984Zm8.189-3.374a1.9 1.9 0 0 0-.432-.919c-.399-.465-1.029-.689-1.848-.689c-.734 0-1.372.228-1.947.799c.007-.086.019-.159.018-.223s-.017-.116-.066-.163c-.048-.045-.077-.067-.127-.077s-.122-.008-.256-.006a.587.587 0 0 0-.589.54s-.325 3.874-.428 5.165a.3.3 0 0 0 .073.228a.36.36 0 0 0 .26.131h.387a.224.224 0 0 0 .226-.205l.273-2.929l.014-.147a2 2 0 0 1 .082-.412q.021-.068.047-.14c.245-.694.803-1.72 1.971-1.694c.84.018 1.449.455 1.385 1.114c-.101 1.034-.266 3.1-.358 4.14c-.019.209.182.273.252.273h.304a.44.44 0 0 0 .444-.404s.185-2.127.294-3.352l.048-.532a2 2 0 0 0-.026-.5Z"/></svg>
reactReact 组件（TSX）
export function CsdnIcon(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: `<path fill="currentColor" d="M4.693 13.638c-.497.568-1.363.63-1.712.63c-.648 0-1.144-.164-1.474-.488c-.313-.307-.478-.76-.489-1.346c-.025-1.358.744-2.762 2.074-2.762c.635 0 1.124.455 1.311.644a.34.34 0 0 0 .282.099a.38.38 0 0 0 .241-.159c.068-.087.135-.237.138-.401s-.057-.344-.243-.49a2.64 2.64 0 0 0-1.668-.591c-.819 0-1.627.376-2.218 1.033c-.621.691-.953 1.63-.935 2.646c.015.815.282 1.5.773 1.982c.528.518 1.3.791 2.235.791c1.097 0 1.776-.325 2.154-.597a.58.58 0 0 0 .24-.456a.7.7 0 0 0-.208-.497c-.23-.248-.448-.101-.503-.037Zm4.97-2.15a8 8 0 0 0-.698-.248q-.237-.072-.45-.131c-.922-.26-1.027-.5-1.017-.68c.022-.363.515-.853 1.352-.792c.607.045 1.015.509 1.205.781c.149.214.371.135.434.095a.6.6 0 0 0 .309-.514a.63.63 0 0 0-.209-.488a2.654 2.654 0 0 0-3.347-.273c-.456.323-.744.772-.77 1.202c-.064 1.061 1.015 1.366 1.803 1.588c.214.061.429.127.667.202c1.14.357 1.173.717 1.092 1.267c-.082.556-.696.834-1.685.761c-1.029-.076-1.464-.61-1.612-.901c-.05-.098-.205-.248-.413-.156c-.514.229-.473.731-.26.993c.339.416 1.15 1.035 2.667 1.035c1.734 0 2.255-.875 2.378-1.64c.092-.572-.022-1.028-.348-1.396c-.236-.267-.592-.495-1.101-.706Zm6.777-2.165c-.598-.431-1.393-.61-2.36-.532c-.712.058-1.274.243-1.335.263l-.006.002a.44.44 0 0 0-.297.379l-.47 5.201a.34.34 0 0 0 .247.35l.072.02l.066.018l.086.021a8 8 0 0 0 1.64.183c.972 0 1.765-.23 2.36-.684c.764-.583 1.141-1.5 1.118-2.725c-.021-1.135-.398-1.974-1.121-2.495Zm-.662 4.461c-.836.639-2.09.562-2.677.481a.13.13 0 0 1-.109-.137l.397-4.248a.11.11 0 0 1 .086-.1c.999-.241 1.777-.168 2.312.218c.189.137.348.331.471.568c.176.339.277.765.286 1.234c.017.916-.24 1.583-.765 1.984Zm8.189-3.374a1.9 1.9 0 0 0-.432-.919c-.399-.465-1.029-.689-1.848-.689c-.734 0-1.372.228-1.947.799c.007-.086.019-.159.018-.223s-.017-.116-.066-.163c-.048-.045-.077-.067-.127-.077s-.122-.008-.256-.006a.587.587 0 0 0-.589.54s-.325 3.874-.428 5.165a.3.3 0 0 0 .073.228a.36.36 0 0 0 .26.131h.387a.224.224 0 0 0 .226-.205l.273-2.929l.014-.147a2 2 0 0 1 .082-.412q.021-.068.047-.14c.245-.694.803-1.72 1.971-1.694c.84.018 1.449.455 1.385 1.114c-.101 1.034-.266 3.1-.358 4.14c-.019.209.182.273.252.273h.304a.44.44 0 0 0 .444-.404s.185-2.127.294-3.352l.048-.532a2 2 0 0 0-.026-.5Z"/>` }}
    />
  );
}
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 = `<path fill="currentColor" d="M4.693 13.638c-.497.568-1.363.63-1.712.63c-.648 0-1.144-.164-1.474-.488c-.313-.307-.478-.76-.489-1.346c-.025-1.358.744-2.762 2.074-2.762c.635 0 1.124.455 1.311.644a.34.34 0 0 0 .282.099a.38.38 0 0 0 .241-.159c.068-.087.135-.237.138-.401s-.057-.344-.243-.49a2.64 2.64 0 0 0-1.668-.591c-.819 0-1.627.376-2.218 1.033c-.621.691-.953 1.63-.935 2.646c.015.815.282 1.5.773 1.982c.528.518 1.3.791 2.235.791c1.097 0 1.776-.325 2.154-.597a.58.58 0 0 0 .24-.456a.7.7 0 0 0-.208-.497c-.23-.248-.448-.101-.503-.037Zm4.97-2.15a8 8 0 0 0-.698-.248q-.237-.072-.45-.131c-.922-.26-1.027-.5-1.017-.68c.022-.363.515-.853 1.352-.792c.607.045 1.015.509 1.205.781c.149.214.371.135.434.095a.6.6 0 0 0 .309-.514a.63.63 0 0 0-.209-.488a2.654 2.654 0 0 0-3.347-.273c-.456.323-.744.772-.77 1.202c-.064 1.061 1.015 1.366 1.803 1.588c.214.061.429.127.667.202c1.14.357 1.173.717 1.092 1.267c-.082.556-.696.834-1.685.761c-1.029-.076-1.464-.61-1.612-.901c-.05-.098-.205-.248-.413-.156c-.514.229-.473.731-.26.993c.339.416 1.15 1.035 2.667 1.035c1.734 0 2.255-.875 2.378-1.64c.092-.572-.022-1.028-.348-1.396c-.236-.267-.592-.495-1.101-.706Zm6.777-2.165c-.598-.431-1.393-.61-2.36-.532c-.712.058-1.274.243-1.335.263l-.006.002a.44.44 0 0 0-.297.379l-.47 5.201a.34.34 0 0 0 .247.35l.072.02l.066.018l.086.021a8 8 0 0 0 1.64.183c.972 0 1.765-.23 2.36-.684c.764-.583 1.141-1.5 1.118-2.725c-.021-1.135-.398-1.974-1.121-2.495Zm-.662 4.461c-.836.639-2.09.562-2.677.481a.13.13 0 0 1-.109-.137l.397-4.248a.11.11 0 0 1 .086-.1c.999-.241 1.777-.168 2.312.218c.189.137.348.331.471.568c.176.339.277.765.286 1.234c.017.916-.24 1.583-.765 1.984Zm8.189-3.374a1.9 1.9 0 0 0-.432-.919c-.399-.465-1.029-.689-1.848-.689c-.734 0-1.372.228-1.947.799c.007-.086.019-.159.018-.223s-.017-.116-.066-.163c-.048-.045-.077-.067-.127-.077s-.122-.008-.256-.006a.587.587 0 0 0-.589.54s-.325 3.874-.428 5.165a.3.3 0 0 0 .073.228a.36.36 0 0 0 .26.131h.387a.224.224 0 0 0 .226-.205l.273-2.929l.014-.147a2 2 0 0 1 .082-.412q.021-.068.047-.14c.245-.694.803-1.72 1.971-1.694c.84.018 1.449.455 1.385 1.114c-.101 1.034-.266 3.1-.358 4.14c-.019.209.182.273.252.273h.304a.44.44 0 0 0 .444-.404s.185-2.127.294-3.352l.048-.532a2 2 0 0 0-.026-.5Z"/>`;
</script>
cssCSS mask（随 currentColor 改色）
.csdn {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.693%2013.638c-.497.568-1.363.63-1.712.63c-.648%200-1.144-.164-1.474-.488c-.313-.307-.478-.76-.489-1.346c-.025-1.358.744-2.762%202.074-2.762c.635%200%201.124.455%201.311.644a.34.34%200%200%200%20.282.099a.38.38%200%200%200%20.241-.159c.068-.087.135-.237.138-.401s-.057-.344-.243-.49a2.64%202.64%200%200%200-1.668-.591c-.819%200-1.627.376-2.218%201.033c-.621.691-.953%201.63-.935%202.646c.015.815.282%201.5.773%201.982c.528.518%201.3.791%202.235.791c1.097%200%201.776-.325%202.154-.597a.58.58%200%200%200%20.24-.456a.7.7%200%200%200-.208-.497c-.23-.248-.448-.101-.503-.037Zm4.97-2.15a8%208%200%200%200-.698-.248q-.237-.072-.45-.131c-.922-.26-1.027-.5-1.017-.68c.022-.363.515-.853%201.352-.792c.607.045%201.015.509%201.205.781c.149.214.371.135.434.095a.6.6%200%200%200%20.309-.514a.63.63%200%200%200-.209-.488a2.654%202.654%200%200%200-3.347-.273c-.456.323-.744.772-.77%201.202c-.064%201.061%201.015%201.366%201.803%201.588c.214.061.429.127.667.202c1.14.357%201.173.717%201.092%201.267c-.082.556-.696.834-1.685.761c-1.029-.076-1.464-.61-1.612-.901c-.05-.098-.205-.248-.413-.156c-.514.229-.473.731-.26.993c.339.416%201.15%201.035%202.667%201.035c1.734%200%202.255-.875%202.378-1.64c.092-.572-.022-1.028-.348-1.396c-.236-.267-.592-.495-1.101-.706Zm6.777-2.165c-.598-.431-1.393-.61-2.36-.532c-.712.058-1.274.243-1.335.263l-.006.002a.44.44%200%200%200-.297.379l-.47%205.201a.34.34%200%200%200%20.247.35l.072.02l.066.018l.086.021a8%208%200%200%200%201.64.183c.972%200%201.765-.23%202.36-.684c.764-.583%201.141-1.5%201.118-2.725c-.021-1.135-.398-1.974-1.121-2.495Zm-.662%204.461c-.836.639-2.09.562-2.677.481a.13.13%200%200%201-.109-.137l.397-4.248a.11.11%200%200%201%20.086-.1c.999-.241%201.777-.168%202.312.218c.189.137.348.331.471.568c.176.339.277.765.286%201.234c.017.916-.24%201.583-.765%201.984Zm8.189-3.374a1.9%201.9%200%200%200-.432-.919c-.399-.465-1.029-.689-1.848-.689c-.734%200-1.372.228-1.947.799c.007-.086.019-.159.018-.223s-.017-.116-.066-.163c-.048-.045-.077-.067-.127-.077s-.122-.008-.256-.006a.587.587%200%200%200-.589.54s-.325%203.874-.428%205.165a.3.3%200%200%200%20.073.228a.36.36%200%200%200%20.26.131h.387a.224.224%200%200%200%20.226-.205l.273-2.929l.014-.147a2%202%200%200%201%20.082-.412q.021-.068.047-.14c.245-.694.803-1.72%201.971-1.694c.84.018%201.449.455%201.385%201.114c-.101%201.034-.266%203.1-.358%204.14c-.019.209.182.273.252.273h.304a.44.44%200%200%200%20.444-.404s.185-2.127.294-3.352l.048-.532a2%202%200%200%200-.026-.5Z%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.693%2013.638c-.497.568-1.363.63-1.712.63c-.648%200-1.144-.164-1.474-.488c-.313-.307-.478-.76-.489-1.346c-.025-1.358.744-2.762%202.074-2.762c.635%200%201.124.455%201.311.644a.34.34%200%200%200%20.282.099a.38.38%200%200%200%20.241-.159c.068-.087.135-.237.138-.401s-.057-.344-.243-.49a2.64%202.64%200%200%200-1.668-.591c-.819%200-1.627.376-2.218%201.033c-.621.691-.953%201.63-.935%202.646c.015.815.282%201.5.773%201.982c.528.518%201.3.791%202.235.791c1.097%200%201.776-.325%202.154-.597a.58.58%200%200%200%20.24-.456a.7.7%200%200%200-.208-.497c-.23-.248-.448-.101-.503-.037Zm4.97-2.15a8%208%200%200%200-.698-.248q-.237-.072-.45-.131c-.922-.26-1.027-.5-1.017-.68c.022-.363.515-.853%201.352-.792c.607.045%201.015.509%201.205.781c.149.214.371.135.434.095a.6.6%200%200%200%20.309-.514a.63.63%200%200%200-.209-.488a2.654%202.654%200%200%200-3.347-.273c-.456.323-.744.772-.77%201.202c-.064%201.061%201.015%201.366%201.803%201.588c.214.061.429.127.667.202c1.14.357%201.173.717%201.092%201.267c-.082.556-.696.834-1.685.761c-1.029-.076-1.464-.61-1.612-.901c-.05-.098-.205-.248-.413-.156c-.514.229-.473.731-.26.993c.339.416%201.15%201.035%202.667%201.035c1.734%200%202.255-.875%202.378-1.64c.092-.572-.022-1.028-.348-1.396c-.236-.267-.592-.495-1.101-.706Zm6.777-2.165c-.598-.431-1.393-.61-2.36-.532c-.712.058-1.274.243-1.335.263l-.006.002a.44.44%200%200%200-.297.379l-.47%205.201a.34.34%200%200%200%20.247.35l.072.02l.066.018l.086.021a8%208%200%200%200%201.64.183c.972%200%201.765-.23%202.36-.684c.764-.583%201.141-1.5%201.118-2.725c-.021-1.135-.398-1.974-1.121-2.495Zm-.662%204.461c-.836.639-2.09.562-2.677.481a.13.13%200%200%201-.109-.137l.397-4.248a.11.11%200%200%201%20.086-.1c.999-.241%201.777-.168%202.312.218c.189.137.348.331.471.568c.176.339.277.765.286%201.234c.017.916-.24%201.583-.765%201.984Zm8.189-3.374a1.9%201.9%200%200%200-.432-.919c-.399-.465-1.029-.689-1.848-.689c-.734%200-1.372.228-1.947.799c.007-.086.019-.159.018-.223s-.017-.116-.066-.163c-.048-.045-.077-.067-.127-.077s-.122-.008-.256-.006a.587.587%200%200%200-.589.54s-.325%203.874-.428%205.165a.3.3%200%200%200%20.073.228a.36.36%200%200%200%20.26.131h.387a.224.224%200%200%200%20.226-.205l.273-2.929l.014-.147a2%202%200%200%201%20.082-.412q.021-.068.047-.14c.245-.694.803-1.72%201.971-1.694c.84.018%201.449.455%201.385%201.114c-.101%201.034-.266%203.1-.358%204.14c-.019.209.182.273.252.273h.304a.44.44%200%200%200%20.444-.404s.185-2.127.294-3.352l.048-.532a2%202%200%200%200-.026-.5Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 csdn 加一点动效

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

csdn 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

2.23 KB

2,285 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

1

<path> ×1

风格

单色（跟随 currentColor）

填充跟随容器颜色

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

常见问题

关于 csdn 图标的下载、商用与改色。

csdn 图标是什么？▾

它是 Simple Icons（simple-icons）开源图标集中的 csdn 图标，单色（跟随 currentColor），viewBox 为 0 0 24 24，文件仅 2.23 KB，矢量格式可无损缩放到任意尺寸。

如何下载 csdn 图标？▾

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

csdn 图标可以商用吗？▾

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

如何修改 csdn 图标的颜色？▾

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