The best UI sound effects for an app or website are short, quiet sounds from one consistent family, with a licence you can prove. Good sources are CC0 packs such as Kenney's interface sets, individually licensed sounds on Freesound, free-licence libraries like Mixkit and Pixabay, and paid or subscription libraries. Choosing the source is the easy half. A UI sound only helps if it is preloaded, plays at a low volume, can be switched off, and repeats something the screen already shows.
This guide compares the main sources by licence, then covers when sound helps an interface, how browsers treat audio, a small Web Audio setup with a mute setting, file formats and accessibility. Licence terms were read on each site's own licence page on 2026-11-09. This is a practical summary, not legal advice: read the full licence before you ship.
Where to get UI sound effects
| Source | Cost | Licence | Credit required | Main condition to check |
|---|---|---|---|---|
| Freesound | Free | Chosen per sound: CC0, CC BY 4.0 or CC BY-NC 4.0, plus older Sampling+ uploads | For CC BY and CC BY-NC sounds | Non-commercial sounds cannot go in a product that earns money |
| Mixkit | Free | Mixkit Sound Effects Free License | The licence does not ask for it | No redistributing a sound on its own, as stock, or in a tool or template |
| Kenney | Free, donation optional | CC0 | No | Mostly game-flavoured sets, smaller catalogue |
| Pixabay | Free | Pixabay Content License | No | No selling or distributing the files on a standalone basis |
| ZapSplat | Free account, or paid Premium | ZapSplat Standard License | Free accounts must credit "ZapSplat"; Premium downloads need no credit | No redistribution in any form outside your project |
| HorizonX | Subscription, Starter from $24.99 a month | CC0 1.0 on every sound we checked | No | Curated from CC0 releases by Kenney and OpenGameArt creators |
A few details that the table cannot hold:
- Freesound is the largest and the most uneven. Its FAQ explains that each uploader picks the licence, so two clicks on the same results page can carry different obligations. Read the licence on every sound page before you download, not after.
- Mixkit lets you use its sound effects in commercial projects, on the web and social media, and in video games under its Sound Effects Free License. The catch for product teams is the template clause: you cannot redistribute a sound "in a tool or template".
- Kenney states on its support page that all assets are CC0 and that attribution is not required. The UI Audio, Interface Sounds and Digital Audio packs are consistent sets, which matters more for an interface than any single sound.
- ZapSplat splits by account. Its Standard License gives free (Basic) accounts MP3 files and requires credit to "ZapSplat" wherever reasonably possible; Premium members get WAV files and no credit requirement, and sounds downloaded while Premium stay credit-free for life. The live page blocked our automated check, so we read the Internet Archive copy captured on 2026-10-30.
- Paid one-off packs on marketplaces such as itch.io are worth a look when you want one designer's coherent style. Each seller writes their own licence, so read it the same way.
CC0, CC BY, NC and "royalty-free": what each means for an app
- CC0 is a public domain dedication. The CC0 deed says you can copy, modify and distribute the work, even for commercial purposes, without asking permission. You can ship, edit and bundle the file without credit.
- CC BY lets you use the sound commercially as long as you give credit. The CC BY 4.0 deed asks for appropriate credit, a link to the licence and an indication of changes. In an app, that credit usually lives on an About, Credits or Open-source licences screen.
- CC BY-NC adds a NonCommercial condition (CC BY-NC 4.0 deed). A paid SaaS, an app with ads, or a company's marketing site is a risky home for it. Most teams simply filter these out.
- "Royalty-free" is not a licence. It means you do not pay per use; the real terms are in each vendor's own document, and the common restriction is on standalone redistribution.
That last point matters more for product teams than people expect. Shipping a sound inside your own app is the normal "end product" case under all of these licences. Selling or open-sourcing a UI kit, a component library or a site template that includes the raw sound files is different, because now you are handing the files to other people. Mixkit's licence excludes templates and tools, and ZapSplat's excludes redistribution in any form outside your project. CC0 sounds are the safe choice for anything you will redistribute.
Whatever you pick, record the file name, source URL, author, licence and download date when you add each sound. Our checklist for handing off visual assets describes the same provenance habit for images and components.
When a UI sound helps, and when it gets in the way
Sound earns its place when it tells people something they might otherwise miss:
- An action finished out of sight: a message sent, a payment confirmed, an export done.
- Something arrived while attention was elsewhere: a new chat message, a timer ending, an incoming call.
- An error in a hands-busy context: a failed scan at a checkout, a rejected input on a kiosk.
- Moments of reward in playful products: a streak, a level-up, finishing onboarding.
It gets in the way when it marks movement instead of events. Hover sounds on every card, ticks on every scroll step, a click on every keystroke and anything that plays on page load turn into noise within minutes, especially in tools people use all day. Hover and scroll sounds belong in game-like interfaces, if anywhere.
Rules of thumb that work in practice:
| Moment | Character | Typical length |
|---|---|---|
| Button press, toggle | Soft, dry click or tick | Under about 100 ms |
| Success, confirmation | Short rising tone or chime | About 200 to 500 ms |
| Error | Lower, duller tone, never harsh | About 200 to 500 ms |
| Notification | Distinct ping or chime per event type | Under 1 second |
| Alarm that needs action now | Loop until resolved | As long as the condition lasts |
Give each kind of event its own sound and keep it stable. People learn that a two-note rise means "sent" in the same way they learn an icon.
Volume, consistency and user control
UI sounds should sit well below any media the product plays. Route every sound through one master volume, set that volume low, and level the set so no single file jumps out. Listen on laptop speakers and a phone, not only on studio headphones, because that is where your users hear it.
Use one family. Clicks from three packs sound like three products. When a control is pressed rapidly (a stepper, a keypad), rotate two or three close variations so the repeat does not sound mechanical.
Give people control. MDN's Web Audio best practices put it plainly: if your application contains sound, let the user control it, for example with a mute checkbox and a volume range. Store the choice so it survives a reload. Our recommendation: default to off in work tools that people use in shared offices, default to on in playful consumer apps, and always ship the setting.
Native platforms set the same expectation. Apple's guidance on playing audio says that people who switch an iPhone to silent also want nonessential sounds such as keyboard clicks and sound effects silenced. A web page has less control over that than a native app, so your own sound setting is the dependable way to respect it.
Why the first sound does not play: autoplay rules
Browsers block audible playback that a page starts on its own before the visitor has interacted with it. MDN's autoplay guide lists the conditions under which audio is allowed, such as the user having clicked, tapped or pressed a key on the site, and shows how to catch the NotAllowedError that play() rejects with when it is blocked. Chrome's autoplay policy adds that an AudioContext created before any user gesture starts in the suspended state and must be resumed after one.
What this means for UI sounds:
- Button sounds are fine. The click that triggers them is the interaction.
- A notification on a freshly opened tab may stay silent. Show it visually first and treat the sound as an extra.
- Never rely on a sound at page load. It will usually be blocked, and it is the pattern people dislike most.
HTMLAudioElement or the Web Audio API?
HTMLAudioElement (new Audio()) |
Web Audio API | |
|---|---|---|
| Setup | One line per sound | Fetch, decode into a buffer, play through nodes |
| Good for | A few occasional sounds, longer audio, streaming | Many short sounds, rapid repeats, overlaps |
| Playing the same sound twice at once | Needs a second element or a reset of currentTime |
Create a new source node per play; the decoded buffer is reused |
| Volume and effects | volume per element |
Gain nodes for a master or per-group volume, plus pitch and filters |
MDN's best practices describe the same split: media elements are more common for full-length tracks, decoded buffers for short, sample-like sounds. The AudioBufferSourceNode page notes that each node plays only once, but nodes are inexpensive to create and the buffer can be reused, so "fire and forget" is the intended pattern.
A minimal setup for a product with a handful of UI sounds:
// ui-sounds.js
const STORAGE_KEY = "ui-sounds";
const ctx = new AudioContext();
const master = ctx.createGain();
master.gain.value = 0.4;
master.connect(ctx.destination);
const buffers = new Map();
let enabled = localStorage.getItem(STORAGE_KEY) !== "off";
export async function loadSounds(files) {
await Promise.all(
Object.entries(files).map(async ([name, url]) => {
const response = await fetch(url);
const data = await response.arrayBuffer();
buffers.set(name, await ctx.decodeAudioData(data));
})
);
}
export function playSound(name) {
const buffer = buffers.get(name);
if (!enabled || !buffer) return;
if (ctx.state === "suspended") ctx.resume();
const source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(master);
source.start();
}
export function setSoundsEnabled(on) {
enabled = on;
localStorage.setItem(STORAGE_KEY, on ? "on" : "off");
}
Call loadSounds({ click: "/sounds/click.mp3", sent: "/sounds/sent.mp3" }) once after the page has rendered, call playSound("sent") from the handler that confirms the action, and wire setSoundsEnabled to a checkbox in settings. The context is created suspended and resumed inside the first click, as the Chrome policy expects. The master gain gives you one place to set overall volume. We checked this snippet's syntax with node --check; it was not run in a browser for this article, so test it in your own targets.
Preloading and file formats
- Preload, but not first. Fetch and decode UI sounds after the main content has rendered. They are small, and a sound that loads on first click arrives late.
- Trim leading silence. A click with a few dozen milliseconds of silence at the start feels laggy even when the code is fast.
- MP3 is the safe default for the web. MDN's audio codec guide notes that the MP3 patents have expired and that it is the most widely distributed audio format. Opus is described there as a good all-round codec for web applications; check its support in the browsers you target before relying on it alone.
- Keep WAV as the master. Edit, trim and level from WAV, then export the web format. Re-encoding an MP3 loses quality each time.
- Mono is usually enough. Clicks and chimes rarely need stereo, and mono files are smaller.
Accessibility: sound is never the only signal
Many people will never hear your sounds: deaf and hard-of-hearing users, people on muted devices, and everyone who turned sounds off. Every sound must repeat information that is already visible, such as a pressed state, a toast, an inline error or a badge. If removing the audio loses information, the design is broken.
Sound can also compete with assistive technology. The W3C's explanation of WCAG 1.4.2 Audio Control notes that screen reader users can find it hard to hear speech output while other audio plays. That criterion targets audio that plays automatically for more than three seconds, but the lesson applies to UI sounds too: keep them short, avoid loops except for real alarms, and announce status changes with an ARIA live region, not with sound alone.
Finally, avoid sharp, loud or high-pitched alerts. An error should inform, not startle.
What HorizonX sounds include
We checked the HorizonX sound library on 2026-11-09. It listed 1,346 sounds, grouped into categories such as clicks and taps, hover and select, switches and toggles, success, errors, notifications, open and close, scroll and drag, plus game sounds and jingles. Every card plays in the browser before you download it. We opened 86 of the product pages: all were CC0 1.0, each credited to its original creator, mostly Kenney and Juhani Junkala, with others from OpenGameArt. Each download contains a 16-bit WAV, a 320 kbps MP3, the creator's original file, a LICENSE.txt and a README or credits file. Downloading needs a HorizonX subscription.
What the subscription adds is a single catalogue with previews, categories and ready WAV and MP3 versions, next to the rest of the HorizonX library. For interface work, the button click sound effects collection (113 sounds when checked) and the notification sounds collection (67 sounds) are the quickest places to start.
If you are adding sound to a game rather than a product interface, our companion guide at horizonx.so/blog/game-sound-effects covers sources, licences inside game builds, loudness and variation for game audio.
FAQ
Are Mixkit sound effects free for commercial use?
Yes, under the Mixkit Sound Effects Free License, which lists commercial projects, web and social media use, and video games among the allowed uses. You cannot redistribute the sounds on their own, as stock, or inside a tool or template, and you cannot claim them as your own.
Do I have to credit sounds from Freesound?
It depends on each sound's licence. CC0 sounds need no credit. CC BY sounds need credit to the author, and CC BY-NC sounds need credit and cannot be used commercially. Freesound's FAQ suggests a credit format and keeps a list of the sounds you have downloaded, which helps when you write the credits.
Why does my notification sound not play?
Most likely the browser's autoplay policy blocked it because the visitor had not interacted with the page yet. Show the notification visually, catch the rejected play() promise or resume a suspended AudioContext after the next click, and do not try to work around the policy.
Should UI sounds be on by default?
For productivity tools used in offices, off by default with an easy setting is the considerate choice. For playful consumer apps and games, on by default can work. In both cases, ship a visible setting and remember the choice.
Next step
Pick three to five events in your product that deserve a sound, choose one family for all of them, and wire them through a single master volume with a mute setting. To hear candidates side by side before you download, browse the HorizonX button click sound effects.