DYDevKitYard

media

Sliders Media SVG Icon

Media adjustment, tuning and editing controls. Preview the icon in realistic interface contexts, customise its presentation, copy reusable markup and download a tailored SVG.

24x24 viewBoxcurrentColorOutline SVG

Icon Studio

Icon Studio

Customise Sliders Media, test it in real interface surfaces and copy reusable SVG or JSX. Default copied SVG keeps currentColor; customised SVG includes your preview choices.

Ready to copy
Component previewSee the icon in common UI contexts.
BrandNav item
DashboardProjects
Alert message
Card titleSupporting interface copy.
Dropdown itemSecond option
NameStatusRow itemActive
List item oneList item two
Outline modeAll current DevKitYard icons are outline icons. Filled variants can be added later.

Output

Copy production-ready markup.

Default output stays reusable with currentColor. Use customised SVG when you need fixed presentation.

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 7h10" /><path d="M18 7h2" /><path d="M14 7a2 2 0 1 0 0 .1" /><path d="M4 13h3" /><path d="M11 13h9" /><path d="M7 13a2 2 0 1 0 0 .1" /><path d="M4 19h12" /><path d="M20 19h0" /><path d="M16 19a2 2 0 1 0 0 .1" /></svg>

Usage examples

Use the format that matches your project. Keep decorative icons hidden from assistive technology, and label icons when they carry meaning without visible text.

HTML

Paste inline SVG anywhere you need a dependency-free icon.

<span class="icon">Sliders Media</span>
CSS

Let the icon inherit text colour with currentColor and control size from CSS.

.icon svg { width: 1.25rem; height: 1.25rem; color: currentColor; }
React

Use the JSX snippet when the icon belongs inside a component or design system.

<SlidersMediaIcon aria-hidden="true" />
Tailwind

Size and colour the inline SVG with utility classes in your own project.

<svg className="h-5 w-5 text-slate-700" aria-hidden="true">...</svg>
Decorative accessibility

Use this when adjacent text already explains the icon.

<svg aria-hidden="true" ...>...</svg>
Meaningful accessibility

Use this when the icon itself communicates the label or state.

<svg role="img" aria-label="Sliders Media" ...>...</svg>

Accessibility notes

Decorative icons

Use aria-hidden="true" when nearby text already explains the action.

Icon-only buttons

Give the button an accessible name, for example aria-label="Copy SVG".

Colour contrast

Do not rely on colour alone. Pair status icons with text for error, warning and success states.

Related icons

media

PlayPlayback and start actions.PausePause and stop-progress actions.CameraImage capture and media uploads.VolumeAudio and sound controls.MusicAudio, playlist and music content.GalleryImage collections and gallery layouts.ImageImages, photos and visual media.VideoVideo files, playback and media content.FilmFilm strips, video reels and media libraries.MicrophoneVoice input, recording and audio capture.HeadphonesListening, support audio and media playback.SpeakerSpeakers, audio output and sound devices.