使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
UI 使用示例
真实组件上下文中的渲染效果,代码可直接复制。
导航项
导航菜单
<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
<!-- 内联 Premiere SVG -->
<span>导航菜单</span>
</a>主要按钮
立即开始
<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
<!-- 内联 Premiere SVG -->
立即开始
</button>React 组件
内联引入
import { PremiereIcon } from './icons';
function Nav() {
return <PremiereIcon className="size-4" />;
}状态徽标
已完成
<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
<!-- 内联 Premiere SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Premiere SVG -->
<input placeholder="搜索Premiere…" class="w-full outline-none" />
</div>功能卡片
功能名称
功能名称
功能的一句话说明。
<div class="rounded-xl border border-neutral-200 p-4">
<span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
<!-- 内联 Premiere SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Premiere 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-1ac5f691bb8a1e47 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-1ac5f691bb8a1e47 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-1ac5f691bb8a1e47 { animation: svg-spin 1.6s linear infinite; }用法示例
Premiere 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Premiere
24px 到 128px 六个常用尺寸的真实渲染,用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Premiere 图标
SVG 矢量文件、PNG 位图(预设 16~512px 或自定义 16~1024px)、Favicon 包、App 图标包(iOS + Android)与矢量 PDF 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
复制 Premiere 图标代码
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg viewBox="0 0 83 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_906_1820)">
<path d="M14.5299 0H67.5214C75.5556 0 82.0513 6.49573 82.0513 14.5299V65.4701C82.0513 73.5043 75.5556 80 67.5214 80H14.5299C6.49573 80 0 73.5043 0 65.4701V14.5299C0 6.49573 6.49573 0 14.5299 0Z" fill="#9999ff"/>
<path d="M19.4872 56.1025V20.923C19.4872 20.6837 19.5897 20.5469 19.8291 20.5469C20.4103 20.5469 20.9573 20.5469 21.7436 20.5127C22.5641 20.4785 23.4188 20.4785 24.3419 20.4444C25.265 20.4102 26.2564 20.4102 27.3162 20.376C28.3761 20.3418 29.4017 20.3418 30.4274 20.3418C33.2308 20.3418 35.5556 20.6837 37.4701 21.4016C39.1795 21.9828 40.7521 22.9401 42.0513 24.205C43.1453 25.2991 44 26.6324 44.547 28.1025C45.0598 29.5384 45.3333 31.0085 45.3333 32.5469C45.3333 35.4871 44.6496 37.9144 43.2821 39.829C41.9145 41.7435 40 43.1794 37.7778 43.9999C35.453 44.8546 32.8889 45.1623 30.0855 45.1623C29.265 45.1623 28.718 45.1623 28.3761 45.1281C28.0342 45.0939 27.5556 45.0939 26.906 45.0939V56.0683C26.9402 56.3076 26.7692 56.5127 26.5299 56.5469C26.4957 56.5469 26.4615 56.5469 26.3932 56.5469H19.8974C19.6239 56.5469 19.4872 56.4102 19.4872 56.1025ZM26.9402 27.1452V38.6324C27.4188 38.6666 27.8633 38.7008 28.2735 38.7008H30.0855C31.4188 38.7008 32.7521 38.4956 34.0171 38.0854C35.1111 37.7777 36.0684 37.1281 36.8205 36.2734C37.5385 35.4187 37.8803 34.2563 37.8803 32.7521C37.9145 31.6922 37.641 30.6324 37.094 29.7093C36.5128 28.8204 35.6923 28.1367 34.7009 27.7606C33.4359 27.2478 32.0684 27.0427 30.6667 27.0768C29.7778 27.0768 28.9915 27.0768 28.3419 27.111C27.6581 27.0768 27.1795 27.111 26.9402 27.1452Z" fill="#9999ff"/>
<path d="M50.1197 29.128H56.1026C56.4445 29.128 56.718 29.3674 56.8205 29.675C56.9231 29.9485 56.9915 30.2221 57.0257 30.5297C57.094 30.8716 57.1624 31.2477 57.1966 31.5896C57.2308 31.9656 57.265 32.3759 57.265 32.8203C58.2906 31.6238 59.5214 30.6323 60.9231 29.8802C62.4957 28.9913 64.3077 28.5468 66.1197 28.5468C66.359 28.5126 66.5641 28.6836 66.5983 28.9229C66.5983 28.9571 66.5983 28.9913 66.5983 29.0597V35.7263C66.5983 35.9998 66.4274 36.1024 66.0513 36.1024C64.8205 36.0682 63.5556 36.1708 62.359 36.4443C61.3675 36.6494 60.4103 36.9571 59.4872 37.3673C58.8376 37.675 58.2222 38.0853 57.7436 38.6323V56.0682C57.7436 56.4101 57.6069 56.5468 57.2992 56.5468H50.5641C50.2906 56.581 50.0513 56.4101 50.0171 56.1366C50.0171 56.1024 50.0171 56.034 50
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Premiere 图标
Premiere 是软件SaaS分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。软件产品与在线服务平台的品牌标识。
在本页点击「下载」即可保存 Premiere 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 Premiere 更多信息可访问官方网站。
Premiere 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求(参见品牌官网)。文件体积 2.75 KB,viewBox 为 0 0 83 80,共 4 个矢量图元。
常见问题
Premiere 图标是什么?
Premiere 是软件SaaS分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 Premiere 图标?
在本页点击「下载 SVG」即可保存 Premiere 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Premiere 图标可以商用吗?
Premiere 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Premiere 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
2.75 KB
2,821 字节
viewBox
0 0 83 80
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
4
<path> ×3 · <rect> ×1
风格
双色
2 种品牌色 · 纯填充
相似图标
按名称与标签相似度排序。
同色系图标
品牌色 #9999ff 的同色相色阶,点击复制色值;下方为品牌色同色相的其他图标。
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 153, 153, 255 | 240°, 100%, 80% | 40, 40, 0, 0 | 品牌主色 · 矢车菊蓝 | |
| 194, 194, 255 | 240°, 100%, 88% | 24, 24, 0, 0 | 浅灰色 | |
| 133, 133, 255 | 240°, 100%, 76% | 48, 48, 0, 0 | 矢车菊蓝 | |
| 61, 61, 255 | 240°, 100%, 62% | 76, 76, 0, 0 | 宝蓝色 |
图标信息摘要
Premiere 是一个软件SaaS类别的单文件 SVG 矢量图标,文件体积 2.75 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Premiere的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。 详情参见Premiere 官网。

