找找图标

adroll SVG 图标

logosadroll

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

图标 ID
logos:adroll
中文名
—
所属集合
SVG Logos
集合规模
2,043 枚
基础网格
—
色彩
多色
开源协议
CC0-1.0
作者
Gil Barbara

下载 adroll 图标

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

px

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

adroll 的预览与使用场景

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

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

在真实界面里长这样

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

各尺寸下的可读性

adroll 图标 24px 渲染24pxadroll 图标 32px 渲染32pxadroll 图标 48px 渲染48pxadroll 图标 64px 渲染64pxadroll 图标 96px 渲染96pxadroll 图标 128px 渲染128px

复制 adroll 图标代码

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

svgSVG 源码(内联 HTML)
<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>
reactReact 组件(TSX)
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"/>` }}
    />
  );
}
vueVue 3 组件
<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>
cssCSS mask(随 currentColor 改色)
.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 即可播放,无需任何依赖;描画动效仅对描边类图标生效。

adroll 呼吸动效演示

呼吸

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

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

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

旋转

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

css旋转动效样式
.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 值。