下载 adroll 图标
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
adroll 的预览与使用场景
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
在真实界面里长这样
各尺寸下的可读性
复制 adroll 图标代码
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="5.39em" height="1em" viewBox="0 0 512 95"><path fill="#0dbdff" d="M102.607 46.54c0-25.695-20.21-46.54-46.54-46.54c-17.495 0-32.682 9.585-40.65 23.847L38.11 46.54c0-9.932 8.372-17.958 17.957-17.958c10.163 0 17.958 8.026 17.958 17.958s-7.853 17.958-17.958 17.958H17.38C7.795 64.498 0 72.293 0 81.878V93.08h56.067c26.157 0 46.54-20.845 46.54-46.54"/><path fill="#333" d="M314.635 41.054h21.711c8.43 0 12.819-3.984 12.819-11.432c0-7.565-4.389-11.549-12.819-11.549h-21.71zm12.53 18.131h-12.53V93.08h-19.459V10.45c0-5.774 4.677-10.451 10.51-10.451h31.238c20.151 0 32.393 12.126 32.393 29.506c0 13.974-7.853 24.598-21.48 28.351l24.251 35.223h-23.327zm184.832 31.412c-3.811 2.483-8.315 4.215-13.165 4.215c-13.396 0-19.69-9.18-19.69-22.23V4.85l18.42-4.388v72.293c0 3.637 1.79 5.89 5.023 5.89c.981 0 2.079-.232 3.118-.694zm-32.162 0c-3.811 2.483-8.315 4.215-13.166 4.215c-13.396 0-19.69-9.18-19.69-22.23V12.53l18.42-4.562v64.787c0 3.637 1.79 5.89 5.024 5.89c.981 0 2.078-.232 3.118-.694zm-57.8-31.18c0-10.798-6.929-18.247-17.323-18.247s-17.322 7.333-17.322 18.246c0 10.914 6.929 18.247 17.322 18.247c10.394 0 17.323-7.333 17.323-18.247m-53.469 0c0-20.729 15.186-35.222 36.146-35.222s36.262 14.378 36.262 35.222c0 20.903-15.359 35.396-36.262 35.396c-20.96 0-36.146-14.493-36.146-35.396M156.307 55.49l13.28-35.57l13.281 35.57zm-.693-48.907L121.547 93.08h20.671l7.276-19.517h40.13L196.9 93.08h20.671L180.905 0h-15.532a10.54 10.54 0 0 0-9.759 6.583m95.101 71.08c-10.278 0-17.323-7.333-17.323-18.247s7.045-18.246 17.323-18.246s17.323 7.333 17.323 18.246c0 11.202-7.218 18.247-17.323 18.247m16.11-45.097c-4.562-5.312-11.49-8.372-19.863-8.372c-18.016 0-32.393 14.378-32.393 35.107c0 20.902 14.377 35.511 31.873 35.511c9.354 0 16.688-4.1 21.365-10.913l.808 9.18h16.514V0h-7.795c-5.774 0-10.509 4.677-10.509 10.451z"/></svg>export function AdrollIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 95"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<path fill="#0dbdff" d="M102.607 46.54c0-25.695-20.21-46.54-46.54-46.54c-17.495 0-32.682 9.585-40.65 23.847L38.11 46.54c0-9.932 8.372-17.958 17.957-17.958c10.163 0 17.958 8.026 17.958 17.958s-7.853 17.958-17.958 17.958H17.38C7.795 64.498 0 72.293 0 81.878V93.08h56.067c26.157 0 46.54-20.845 46.54-46.54"/><path fill="#333" d="M314.635 41.054h21.711c8.43 0 12.819-3.984 12.819-11.432c0-7.565-4.389-11.549-12.819-11.549h-21.71zm12.53 18.131h-12.53V93.08h-19.459V10.45c0-5.774 4.677-10.451 10.51-10.451h31.238c20.151 0 32.393 12.126 32.393 29.506c0 13.974-7.853 24.598-21.48 28.351l24.251 35.223h-23.327zm184.832 31.412c-3.811 2.483-8.315 4.215-13.165 4.215c-13.396 0-19.69-9.18-19.69-22.23V4.85l18.42-4.388v72.293c0 3.637 1.79 5.89 5.023 5.89c.981 0 2.079-.232 3.118-.694zm-32.162 0c-3.811 2.483-8.315 4.215-13.166 4.215c-13.396 0-19.69-9.18-19.69-22.23V12.53l18.42-4.562v64.787c0 3.637 1.79 5.89 5.024 5.89c.981 0 2.078-.232 3.118-.694zm-57.8-31.18c0-10.798-6.929-18.247-17.323-18.247s-17.322 7.333-17.322 18.246c0 10.914 6.929 18.247 17.322 18.247c10.394 0 17.323-7.333 17.323-18.247m-53.469 0c0-20.729 15.186-35.222 36.146-35.222s36.262 14.378 36.262 35.222c0 20.903-15.359 35.396-36.262 35.396c-20.96 0-36.146-14.493-36.146-35.396M156.307 55.49l13.28-35.57l13.281 35.57zm-.693-48.907L121.547 93.08h20.671l7.276-19.517h40.13L196.9 93.08h20.671L180.905 0h-15.532a10.54 10.54 0 0 0-9.759 6.583m95.101 71.08c-10.278 0-17.323-7.333-17.323-18.247s7.045-18.246 17.323-18.246s17.323 7.333 17.323 18.246c0 11.202-7.218 18.247-17.323 18.247m16.11-45.097c-4.562-5.312-11.49-8.372-19.863-8.372c-18.016 0-32.393 14.378-32.393 35.107c0 20.902 14.377 35.511 31.873 35.511c9.354 0 16.688-4.1 21.365-10.913l.808 9.18h16.514V0h-7.795c-5.774 0-10.509 4.677-10.509 10.451z"/>` }}
/>
);
}<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 95" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<path fill="#0dbdff" d="M102.607 46.54c0-25.695-20.21-46.54-46.54-46.54c-17.495 0-32.682 9.585-40.65 23.847L38.11 46.54c0-9.932 8.372-17.958 17.957-17.958c10.163 0 17.958 8.026 17.958 17.958s-7.853 17.958-17.958 17.958H17.38C7.795 64.498 0 72.293 0 81.878V93.08h56.067c26.157 0 46.54-20.845 46.54-46.54"/><path fill="#333" d="M314.635 41.054h21.711c8.43 0 12.819-3.984 12.819-11.432c0-7.565-4.389-11.549-12.819-11.549h-21.71zm12.53 18.131h-12.53V93.08h-19.459V10.45c0-5.774 4.677-10.451 10.51-10.451h31.238c20.151 0 32.393 12.126 32.393 29.506c0 13.974-7.853 24.598-21.48 28.351l24.251 35.223h-23.327zm184.832 31.412c-3.811 2.483-8.315 4.215-13.165 4.215c-13.396 0-19.69-9.18-19.69-22.23V4.85l18.42-4.388v72.293c0 3.637 1.79 5.89 5.023 5.89c.981 0 2.079-.232 3.118-.694zm-32.162 0c-3.811 2.483-8.315 4.215-13.166 4.215c-13.396 0-19.69-9.18-19.69-22.23V12.53l18.42-4.562v64.787c0 3.637 1.79 5.89 5.024 5.89c.981 0 2.078-.232 3.118-.694zm-57.8-31.18c0-10.798-6.929-18.247-17.323-18.247s-17.322 7.333-17.322 18.246c0 10.914 6.929 18.247 17.322 18.247c10.394 0 17.323-7.333 17.323-18.247m-53.469 0c0-20.729 15.186-35.222 36.146-35.222s36.262 14.378 36.262 35.222c0 20.903-15.359 35.396-36.262 35.396c-20.96 0-36.146-14.493-36.146-35.396M156.307 55.49l13.28-35.57l13.281 35.57zm-.693-48.907L121.547 93.08h20.671l7.276-19.517h40.13L196.9 93.08h20.671L180.905 0h-15.532a10.54 10.54 0 0 0-9.759 6.583m95.101 71.08c-10.278 0-17.323-7.333-17.323-18.247s7.045-18.246 17.323-18.246s17.323 7.333 17.323 18.246c0 11.202-7.218 18.247-17.323 18.247m16.11-45.097c-4.562-5.312-11.49-8.372-19.863-8.372c-18.016 0-32.393 14.378-32.393 35.107c0 20.902 14.377 35.511 31.873 35.511c9.354 0 16.688-4.1 21.365-10.913l.808 9.18h16.514V0h-7.795c-5.774 0-10.509 4.677-10.509 10.451z"/>`;
</script>.adroll {
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%225.39em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%2095%22%3E%3Cpath%20fill%3D%22%230dbdff%22%20d%3D%22M102.607%2046.54c0-25.695-20.21-46.54-46.54-46.54c-17.495%200-32.682%209.585-40.65%2023.847L38.11%2046.54c0-9.932%208.372-17.958%2017.957-17.958c10.163%200%2017.958%208.026%2017.958%2017.958s-7.853%2017.958-17.958%2017.958H17.38C7.795%2064.498%200%2072.293%200%2081.878V93.08h56.067c26.157%200%2046.54-20.845%2046.54-46.54%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M314.635%2041.054h21.711c8.43%200%2012.819-3.984%2012.819-11.432c0-7.565-4.389-11.549-12.819-11.549h-21.71zm12.53%2018.131h-12.53V93.08h-19.459V10.45c0-5.774%204.677-10.451%2010.51-10.451h31.238c20.151%200%2032.393%2012.126%2032.393%2029.506c0%2013.974-7.853%2024.598-21.48%2028.351l24.251%2035.223h-23.327zm184.832%2031.412c-3.811%202.483-8.315%204.215-13.165%204.215c-13.396%200-19.69-9.18-19.69-22.23V4.85l18.42-4.388v72.293c0%203.637%201.79%205.89%205.023%205.89c.981%200%202.079-.232%203.118-.694zm-32.162%200c-3.811%202.483-8.315%204.215-13.166%204.215c-13.396%200-19.69-9.18-19.69-22.23V12.53l18.42-4.562v64.787c0%203.637%201.79%205.89%205.024%205.89c.981%200%202.078-.232%203.118-.694zm-57.8-31.18c0-10.798-6.929-18.247-17.323-18.247s-17.322%207.333-17.322%2018.246c0%2010.914%206.929%2018.247%2017.322%2018.247c10.394%200%2017.323-7.333%2017.323-18.247m-53.469%200c0-20.729%2015.186-35.222%2036.146-35.222s36.262%2014.378%2036.262%2035.222c0%2020.903-15.359%2035.396-36.262%2035.396c-20.96%200-36.146-14.493-36.146-35.396M156.307%2055.49l13.28-35.57l13.281%2035.57zm-.693-48.907L121.547%2093.08h20.671l7.276-19.517h40.13L196.9%2093.08h20.671L180.905%200h-15.532a10.54%2010.54%200%200%200-9.759%206.583m95.101%2071.08c-10.278%200-17.323-7.333-17.323-18.247s7.045-18.246%2017.323-18.246s17.323%207.333%2017.323%2018.246c0%2011.202-7.218%2018.247-17.323%2018.247m16.11-45.097c-4.562-5.312-11.49-8.372-19.863-8.372c-18.016%200-32.393%2014.378-32.393%2035.107c0%2020.902%2014.377%2035.511%2031.873%2035.511c9.354%200%2016.688-4.1%2021.365-10.913l.808%209.18h16.514V0h-7.795c-5.774%200-10.509%204.677-10.509%2010.451z%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%225.39em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%2095%22%3E%3Cpath%20fill%3D%22%230dbdff%22%20d%3D%22M102.607%2046.54c0-25.695-20.21-46.54-46.54-46.54c-17.495%200-32.682%209.585-40.65%2023.847L38.11%2046.54c0-9.932%208.372-17.958%2017.957-17.958c10.163%200%2017.958%208.026%2017.958%2017.958s-7.853%2017.958-17.958%2017.958H17.38C7.795%2064.498%200%2072.293%200%2081.878V93.08h56.067c26.157%200%2046.54-20.845%2046.54-46.54%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M314.635%2041.054h21.711c8.43%200%2012.819-3.984%2012.819-11.432c0-7.565-4.389-11.549-12.819-11.549h-21.71zm12.53%2018.131h-12.53V93.08h-19.459V10.45c0-5.774%204.677-10.451%2010.51-10.451h31.238c20.151%200%2032.393%2012.126%2032.393%2029.506c0%2013.974-7.853%2024.598-21.48%2028.351l24.251%2035.223h-23.327zm184.832%2031.412c-3.811%202.483-8.315%204.215-13.165%204.215c-13.396%200-19.69-9.18-19.69-22.23V4.85l18.42-4.388v72.293c0%203.637%201.79%205.89%205.023%205.89c.981%200%202.079-.232%203.118-.694zm-32.162%200c-3.811%202.483-8.315%204.215-13.166%204.215c-13.396%200-19.69-9.18-19.69-22.23V12.53l18.42-4.562v64.787c0%203.637%201.79%205.89%205.024%205.89c.981%200%202.078-.232%203.118-.694zm-57.8-31.18c0-10.798-6.929-18.247-17.323-18.247s-17.322%207.333-17.322%2018.246c0%2010.914%206.929%2018.247%2017.322%2018.247c10.394%200%2017.323-7.333%2017.323-18.247m-53.469%200c0-20.729%2015.186-35.222%2036.146-35.222s36.262%2014.378%2036.262%2035.222c0%2020.903-15.359%2035.396-36.262%2035.396c-20.96%200-36.146-14.493-36.146-35.396M156.307%2055.49l13.28-35.57l13.281%2035.57zm-.693-48.907L121.547%2093.08h20.671l7.276-19.517h40.13L196.9%2093.08h20.671L180.905%200h-15.532a10.54%2010.54%200%200%200-9.759%206.583m95.101%2071.08c-10.278%200-17.323-7.333-17.323-18.247s7.045-18.246%2017.323-18.246s17.323%207.333%2017.323%2018.246c0%2011.202-7.218%2018.247-17.323%2018.247m16.11-45.097c-4.562-5.312-11.49-8.372-19.863-8.372c-18.016%200-32.393%2014.378-32.393%2035.107c0%2020.902%2014.377%2035.511%2031.873%2035.511c9.354%200%2016.688-4.1%2021.365-10.913l.808%209.18h16.514V0h-7.795c-5.774%200-10.509%204.677-10.509%2010.451z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 adroll 加一点动效
单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
呼吸
透明度往复渐变,适合状态提示与在线指示。
.icon-adroll {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转,适合加载中场景。
.icon-adroll {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}SVG 健康报告
对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
1.81 KB
1,852 字节
viewBox
0 0 512 95
矢量坐标系
图元总数
2
<path> ×2
风格
多色填充
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.81 KB(1,852 字节),图元 2 个,风格为多色填充。
常见问题
关于 adroll 图标的下载、商用与改色。
adroll 图标是什么?▾
它是 SVG Logos(logos)开源图标集中的 adroll 图标,多色填充,viewBox 为 0 0 512 95,文件仅 1.81 KB,矢量格式可无损缩放到任意尺寸。
如何下载 adroll 图标?▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
adroll 图标可以商用吗?▾
该图标采用 CC0(CC0-1.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 adroll 图标的颜色?▾
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。