Safari Wordmark
The Safari wordmark icon represents the brand identity of Apple's Safari web browser.
Exports at 24 × 24 px
Code
Safari Wordmark in your framework
In any framework. Customize it above, and the code follows.
export const SafariWordmarkIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 128 128" {...props}>
<path fill="#333" d="M23.807 124.812c1.296.864 3.852 1.548 6.192 1.548c5.724 0 8.496-3.24 8.496-6.984c0-3.564-2.088-5.544-6.192-7.128c-3.348-1.296-4.824-2.412-4.824-4.68c0-1.656 1.26-3.636 4.572-3.636c2.196 0 3.816.72 4.608 1.152l.864-2.556c-1.08-.612-2.88-1.188-5.364-1.188c-4.716 0-7.848 2.808-7.848 6.588c0 3.42 2.448 5.472 6.408 6.876c3.276 1.26 4.572 2.556 4.572 4.824c0 2.448-1.872 4.14-5.076 4.14c-2.16 0-4.212-.72-5.616-1.584zm31.5 1.188c-.216-1.188-.288-2.664-.288-4.176v-6.516c0-3.492-1.296-7.128-6.624-7.128c-2.196 0-4.284.612-5.724 1.548l.72 2.088c1.224-.792 2.916-1.296 4.536-1.296c3.564 0 3.96 2.592 3.96 4.032v.36c-6.732-.036-10.476 2.268-10.476 6.48c0 2.52 1.8 5.004 5.328 5.004c2.484 0 4.356-1.224 5.328-2.592h.108l.252 2.196Zm-3.348-5.868c0 .324-.072.684-.18 1.008c-.504 1.476-1.944 2.916-4.212 2.916c-1.62 0-2.988-.972-2.988-3.024c0-3.384 3.924-3.996 7.38-3.924zM63.587 126v-15.012h4.212v-2.412h-4.212v-.936c0-2.664.684-5.04 3.384-5.04c.9 0 1.548.18 2.016.396l.432-2.448c-.612-.252-1.584-.504-2.7-.504c-1.476 0-3.06.468-4.248 1.62c-1.476 1.404-2.016 3.636-2.016 6.084v.828h-2.448v2.412h2.448V126Zm19.584 0c-.216-1.188-.288-2.664-.288-4.176v-6.516c0-3.492-1.296-7.128-6.624-7.128c-2.196 0-4.284.612-5.724 1.548l.72 2.088c1.224-.792 2.916-1.296 4.536-1.296c3.564 0 3.96 2.592 3.96 4.032v.36c-6.732-.036-10.476 2.268-10.476 6.48c0 2.52 1.8 5.004 5.328 5.004c2.484 0 4.356-1.224 5.328-2.592h.108l.252 2.196zm-3.348-5.868c0 .324-.072.684-.18 1.008c-.504 1.476-1.944 2.916-4.212 2.916c-1.62 0-2.988-.972-2.988-3.024c0-3.384 3.924-3.996 7.38-3.924zM87.995 126h3.132v-9.288c0-.54.072-1.044.144-1.476c.432-2.376 2.016-4.068 4.248-4.068c.432 0 .756.036 1.08.108v-2.988a3.4 3.4 0 0 0-.9-.108c-2.124 0-4.032 1.476-4.824 3.816h-.144l-.108-3.42h-2.772c.108 1.62.144 3.384.144 5.436zm15.084 0v-17.424h-3.168V126Zm-1.584-24.3c-1.152 0-1.98.864-1.98 1.98c0 1.08.792 1.944 1.908 1.944c1.26 0 2.052-.864 2.016-1.944c0-1.116-.756-1.98-1.944-1.98"/><linearGradient id="SVGeswNDb6j" x1="295.835" x2="295.835" y1="124.728" y2="123.889" gradientTransform="matrix(112 0 0 -112 -33069.5 13971)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#19d7ff"/><stop offset="1" stopColor="#1e64f0"/></linearGradient><circle cx="64" cy="48.5" r="47" fill="url(#SVGeswNDb6j)"/><path fill="#fff" d="M63.5 6.1V13h1V6.1Zm-2.701.16l-.998.08l.3 3.701l.997-.082zm6.402 0l-.299 3.699l.996.082l.301-3.701zm-10.008.453l-.986.174l1.201 6.8l.985-.173zm13.614 0l-1.2 6.8l.985.174l1.201-6.8zm-17.221.766l-.97.242l.9 3.6l.968-.243zm20.828 0l-.898 3.6l.968.241l.9-3.6zM49.97 8.527l-.938.346l2.4 6.5l.938-.346zm28.062 0l-2.4 6.5l.937.346l2.4-6.5zm-31.478 1.36l-.905.426l1.6 3.4l.904-.426zm34.894 0l-1.6 3.4l.905.426l1.6-3.4zm-38.111 1.666l-.871.494l3.4 6l.87-.494zm41.328 0l-3.398 6l.869.494l3.4-6zM40.22 13.426l-.836.549l2.1 3.199l.835-.549zm47.562 0l-2.1 3.199l.837.549l2.1-3.2zm-50.6 2.25l-.763.648l4.5 5.299l.764-.646zm53.637 0l-4.5 5.3l.764.647l4.5-5.299zm-56.365 2.47l-.707.708l2.701 2.699l.707-.707zm-2.53 2.672l-.646.764l5.3 4.5l.646-.764zm64.153 0l-5.299 4.5l.647.764l5.299-4.5zM29.69 23.691l-.578.817l3.1 2.199l.578-.814zm68.622 0l-3.1 2.202l.578.814l3.1-2.2zm-70.665 3.174l-.492.87l6 3.4l.492-.87zm72.708 0l-6 3.4l.492.87l6-3.4zm-74.442 3.182l-.426.906l3.4 1.6l.427-.905zm76.176 0l-3.4 1.601l.425.905l3.4-1.6zm-77.615 3.385l-.346.937l6.5 2.4l.346-.939zm79.054 0l-6.5 2.398l.346.94l6.5-2.4zm-80.193 3.486l-.268.963l3.6 1l.268-.963zm81.332 0l-3.6 1l.268.963l3.6-1zm-82.18 3.59l-.174.984l6.801 1.201l.174-.986zm83.028 0l-6.801 1.199l.174.986l6.8-1.2zM21.939 44.2l-.078.998l3.8.299l.08-.996zm84.122 0l-3.801.301l.08.996l3.799-.299zm-84.362 3.7v1h7v-1zm77.602 0v1h7v-1zm-73.653 3.302l-3.8.4l.105.995l3.799-.4zm76.704 0l-.104.994l3.799.4l.105-.993zm-73.239 2.805l-6.8 1.199l.173.986l6.801-1.2zm69.774 0l-.174.984l6.8 1.201l.174-.986zm-72.221 3.81l-3.6 1l.268.963l3.6-1zm74.668 0l-.268.963l3.6 1l.268-.963zM30.633 60.03l-6.5 2.3l.334.942l6.5-2.3zm66.734 0l-.334.942l6.5 2.3l.334-.943zm-68.48 4.12l-3.4 1.599l.425.904l3.4-1.6zm70.226 0l-.425.904l3.4 1.6l.426-.905zm-65.959 1.515l-6 3.4l.492.872l6-3.4zm61.692 0l-.492.871l6 3.4l.492-.87zm-62.627 4.422l-3.1 2.1l.56.828l3.102-2.1zm63.562 0l-.562.828l3.101 2.1l.56-.828zm-59.2.629l-5.3 4.4l.639.77l5.299-4.4zm54.839 0l-.639.77l5.3 4.4l.638-.77zM40.916 75.08l-4.5 5.4l.768.64l4.5-5.4zm46.168 0l-.768.64l4.5 5.4l.768-.64zm4.469.166l-.707.707l2.7 2.701l.708-.707zm-45.688 3.508l-3.4 6l.87.492l3.4-6zm36.27 0l-.87.492l3.4 6l.87-.492zm-40.649.865l-2.1 3.1l.829.562l2.1-3.101zm45.028 0l-.828.56l2.1 3.102l.827-.562zm-35.082 1.809l-2.4 6.5l.937.345l2.4-6.5zm25.136 0l-.937.345l2.4 6.5l.938-.345zm-29.32 1.66l-1.6 3.398l.905.426l1.6-3.398zm33.504 0l-.904.426l1.6 3.398l.904-.426zm-23.344.025l-1.201 6.801l.986.172l1.2-6.799zm13.184 0l-.985.174l1.2 6.799l.986-.172zM63.5 83.7v6.9h1v-6.9zm-9.986 1.682l-.9 3.701l.972.236l.9-3.699zm20.972 0l-.972.238l.9 3.7l.973-.237zm-14.384 1.28l-.301 3.8l.998.078l.299-3.799zm7.796 0l-.996.08l.3 3.798l.997-.078z"/><path fill="red" d="M96.1 16.2L60 44.5l3.9 3.9z"/><path fill="#d01414" d="m63.9 48.4l4.5 4.5l27.7-36.7z"/><path fill="#fff" d="M60 44.5L31.7 80.6l32.2-32.2z"/><path fill="#acacac" d="m31.7 80.6l36.7-27.7l-4.5-4.5z"/>
</svg>
);Other libraries
Safari Wordmark in 2 more libraries
Each library draws it its own way. Open one to compare.
Devicon
More like it
Icons that share its tags, in the same style.
Search Devicon
Skip the copy and paste. With Pro, your AI agent finds and installs any Devicon icon from a prompt.
Get ProTags
Browse by tag
Safari Wordmark is tagged browser, apple, iOS and 1 more. Related tags follow; each opens its icons from every library.
Pricing
Devicon MCP, with Pro
Ask for Safari Wordmark or any of 1,026 Devicon icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Safari Wordmark icon means and where it's used, then how to install, style, label and license it.
The Safari wordmark icon represents the brand identity of Apple's Safari web browser.
The Safari wordmark is often used in conjunction with the Safari logo to provide a clear visual representation of the browser.
In real-world applications, the Safari wordmark icon appears in various contexts, such as browser toolbars, bookmarks, and app icons.
Safari Wordmark is one of 1,026 icons in Devicon, made by konpa and released under MIT. It is drawn on a 128 × 128 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds SafariWordmarkIcon to components/icons/devicon-safari-wordmark.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed SafariWordmarkIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Safari Wordmark icon, or any of 1,026 Devicon icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 128 × 128 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Safari Wordmark", so screen readers say what it does.
Yes. SafariWordmarkIcon passes every SVG prop to the svg element, so <SafariWordmarkIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
Yes. MIT allows commercial use; keep the license notice when you ship the icons' source files. The full terms are in the license, linked on this page.
No visible credit is required: MIT only asks that you keep the license notice if you ship the icons' source files. Icons installed with the shadcn CLI already start with a comment naming Devicon, konpa and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
2 other libraries draw an icon called Safari Wordmark. The Other libraries section on this page shows each one, so you can compare them and open the one that fits your style.
Its tags are browser, apple, iOS and macos. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Safari Wordmark in another set.
4.9 out of 5 from 150+ developers
Install Safari Wordmark from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro