osu logo
osu from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- osu
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
Use the osu logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.698 10.362a1.94 1.94 0 0 0-.7-.516q-.421-.189-.988-.189c-.567 0-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0 .511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565 0 .707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3 3.3 0 0 0-.135-.96a2.1 2.1 0 0 0-.413-.777m-.965 2.81q-.22.372-.723.372q-.494 0-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503 0 .723.372q.22.373.22 1.073t-.22 1.073m11.89-.83l-.09-4.39a4.5 4.5 0 0 1 .69-.054q.351 0 .701.054l-.09 4.39q-.315.053-.601.053a3.5 3.5 0 0 1-.61-.054m1.319 1.4q0 .332-.054.664a4 4 0 0 1-.655.054a4 4 0 0 1-.664-.054a4 4 0 0 1-.054-.655q0-.323.054-.665a4 4 0 0 1 .655-.054q.323 0 .664.054q.054.341.054.656m-3.223-4.03q.315 0 .638.053v4.461q-.288.099-.759.193a5.3 5.3 0 0 1-1.863.023a1.7 1.7 0 0 1-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4 4 0 0 1 .638-.054q.313 0 .637.054v2.46q0 .367.058.606a.9.9 0 0 0 .18.377a.66.66 0 0 0 .3.197q.18.058.422.058q.332 0 .557-.062V9.765a4 4 0 0 1 .628-.054m-4.362 2.683q.08.225.08.548a1.4 1.4 0 0 1-.542 1.117q-.265.212-.642.333q-.378.12-.853.12a5 5 0 0 1-.395-.013a3 3 0 0 1-.346-.045a4 4 0 0 1-.327-.076a4 4 0 0 1-.35-.116a2.6 2.6 0 0 1 .085-.49a3 3 0 0 1 .175-.48q.296.117.561.175q.265.06.552.059q.126 0 .274-.023a1 1 0 0 0 .274-.08a.7.7 0 0 0 .21-.153a.35.35 0 0 0 .086-.247q0-.216-.13-.31a1.3 1.3 0 0 0-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386 1.332-.386q.35 0 .692.062q.341.063.691.189a2.5 2.5 0 0 1-.09.485a2.3 2.3 0 0 1-.17.44a4 4 0 0 0-.476-.158a2.2 2.2 0 0 0-.548-.067q-.305 0-.476.094a.32.32 0 0 0-.17.301q0 .197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0m0 22.8C6.035 22.8 1.2 17.965 1.2 12S6.035 1.2 12 1.2S22.8 6.035 22.8 12S17.965 22.8 12 22.8"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsOsu(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.698 10.362a1.94 1.94 0 0 0-.7-.516q-.421-.189-.988-.189c-.567 0-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0 .511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565 0 .707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3 3.3 0 0 0-.135-.96a2.1 2.1 0 0 0-.413-.777m-.965 2.81q-.22.372-.723.372q-.494 0-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503 0 .723.372q.22.373.22 1.073t-.22 1.073m11.89-.83l-.09-4.39a4.5 4.5 0 0 1 .69-.054q.351 0 .701.054l-.09 4.39q-.315.053-.601.053a3.5 3.5 0 0 1-.61-.054m1.319 1.4q0 .332-.054.664a4 4 0 0 1-.655.054a4 4 0 0 1-.664-.054a4 4 0 0 1-.054-.655q0-.323.054-.665a4 4 0 0 1 .655-.054q.323 0 .664.054q.054.341.054.656m-3.223-4.03q.315 0 .638.053v4.461q-.288.099-.759.193a5.3 5.3 0 0 1-1.863.023a1.7 1.7 0 0 1-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4 4 0 0 1 .638-.054q.313 0 .637.054v2.46q0 .367.058.606a.9.9 0 0 0 .18.377a.66.66 0 0 0 .3.197q.18.058.422.058q.332 0 .557-.062V9.765a4 4 0 0 1 .628-.054m-4.362 2.683q.08.225.08.548a1.4 1.4 0 0 1-.542 1.117q-.265.212-.642.333q-.378.12-.853.12a5 5 0 0 1-.395-.013a3 3 0 0 1-.346-.045a4 4 0 0 1-.327-.076a4 4 0 0 1-.35-.116a2.6 2.6 0 0 1 .085-.49a3 3 0 0 1 .175-.48q.296.117.561.175q.265.06.552.059q.126 0 .274-.023a1 1 0 0 0 .274-.08a.7.7 0 0 0 .21-.153a.35.35 0 0 0 .086-.247q0-.216-.13-.31a1.3 1.3 0 0 0-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386 1.332-.386q.35 0 .692.062q.341.063.691.189a2.5 2.5 0 0 1-.09.485a2.3 2.3 0 0 1-.17.44a4 4 0 0 0-.476-.158a2.2 2.2 0 0 0-.548-.067q-.305 0-.476.094a.32.32 0 0 0-.17.301q0 .197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0m0 22.8C6.035 22.8 1.2 17.965 1.2 12S6.035 1.2 12 1.2S22.8 6.035 22.8 12S17.965 22.8 12 22.8"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.698 10.362a1.94 1.94 0 0 0-.7-.516q-.421-.189-.988-.189c-.567 0-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0 .511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565 0 .707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3 3.3 0 0 0-.135-.96a2.1 2.1 0 0 0-.413-.777m-.965 2.81q-.22.372-.723.372q-.494 0-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503 0 .723.372q.22.373.22 1.073t-.22 1.073m11.89-.83l-.09-4.39a4.5 4.5 0 0 1 .69-.054q.351 0 .701.054l-.09 4.39q-.315.053-.601.053a3.5 3.5 0 0 1-.61-.054m1.319 1.4q0 .332-.054.664a4 4 0 0 1-.655.054a4 4 0 0 1-.664-.054a4 4 0 0 1-.054-.655q0-.323.054-.665a4 4 0 0 1 .655-.054q.323 0 .664.054q.054.341.054.656m-3.223-4.03q.315 0 .638.053v4.461q-.288.099-.759.193a5.3 5.3 0 0 1-1.863.023a1.7 1.7 0 0 1-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4 4 0 0 1 .638-.054q.313 0 .637.054v2.46q0 .367.058.606a.9.9 0 0 0 .18.377a.66.66 0 0 0 .3.197q.18.058.422.058q.332 0 .557-.062V9.765a4 4 0 0 1 .628-.054m-4.362 2.683q.08.225.08.548a1.4 1.4 0 0 1-.542 1.117q-.265.212-.642.333q-.378.12-.853.12a5 5 0 0 1-.395-.013a3 3 0 0 1-.346-.045a4 4 0 0 1-.327-.076a4 4 0 0 1-.35-.116a2.6 2.6 0 0 1 .085-.49a3 3 0 0 1 .175-.48q.296.117.561.175q.265.06.552.059q.126 0 .274-.023a1 1 0 0 0 .274-.08a.7.7 0 0 0 .21-.153a.35.35 0 0 0 .086-.247q0-.216-.13-.31a1.3 1.3 0 0 0-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386 1.332-.386q.35 0 .692.062q.341.063.691.189a2.5 2.5 0 0 1-.09.485a2.3 2.3 0 0 1-.17.44a4 4 0 0 0-.476-.158a2.2 2.2 0 0 0-.548-.067q-.305 0-.476.094a.32.32 0 0 0-.17.301q0 .197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0m0 22.8C6.035 22.8 1.2 17.965 1.2 12S6.035 1.2 12 1.2S22.8 6.035 22.8 12S17.965 22.8 12 22.8"/></svg> </template>
CSS
.icon-osu {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.698%2010.362a1.94%201.94%200%200%200-.7-.516q-.421-.189-.988-.189c-.567%200-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0%20.511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565%200%20.707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3%203.3%200%200%200-.135-.96a2.1%202.1%200%200%200-.413-.777m-.965%202.81q-.22.372-.723.372q-.494%200-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503%200%20.723.372q.22.373.22%201.073t-.22%201.073m11.89-.83l-.09-4.39a4.5%204.5%200%200%201%20.69-.054q.351%200%20.701.054l-.09%204.39q-.315.053-.601.053a3.5%203.5%200%200%201-.61-.054m1.319%201.4q0%20.332-.054.664a4%204%200%200%201-.655.054a4%204%200%200%201-.664-.054a4%204%200%200%201-.054-.655q0-.323.054-.665a4%204%200%200%201%20.655-.054q.323%200%20.664.054q.054.341.054.656m-3.223-4.03q.315%200%20.638.053v4.461q-.288.099-.759.193a5.3%205.3%200%200%201-1.863.023a1.7%201.7%200%200%201-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4%204%200%200%201%20.638-.054q.313%200%20.637.054v2.46q0%20.367.058.606a.9.9%200%200%200%20.18.377a.66.66%200%200%200%20.3.197q.18.058.422.058q.332%200%20.557-.062V9.765a4%204%200%200%201%20.628-.054m-4.362%202.683q.08.225.08.548a1.4%201.4%200%200%201-.542%201.117q-.265.212-.642.333q-.378.12-.853.12a5%205%200%200%201-.395-.013a3%203%200%200%201-.346-.045a4%204%200%200%201-.327-.076a4%204%200%200%201-.35-.116a2.6%202.6%200%200%201%20.085-.49a3%203%200%200%201%20.175-.48q.296.117.561.175q.265.06.552.059q.126%200%20.274-.023a1%201%200%200%200%20.274-.08a.7.7%200%200%200%20.21-.153a.35.35%200%200%200%20.086-.247q0-.216-.13-.31a1.3%201.3%200%200%200-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386%201.332-.386q.35%200%20.692.062q.341.063.691.189a2.5%202.5%200%200%201-.09.485a2.3%202.3%200%200%201-.17.44a4%204%200%200%200-.476-.158a2.2%202.2%200%200%200-.548-.067q-.305%200-.476.094a.32.32%200%200%200-.17.301q0%20.197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12%200C5.373%200%200%205.373%200%2012s5.373%2012%2012%2012c6.628%200%2012-5.373%2012-12S18.628%200%2012%200m0%2022.8C6.035%2022.8%201.2%2017.965%201.2%2012S6.035%201.2%2012%201.2S22.8%206.035%2022.8%2012S17.965%2022.8%2012%2022.8%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%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.698%2010.362a1.94%201.94%200%200%200-.7-.516q-.421-.189-.988-.189c-.567%200-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0%20.511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565%200%20.707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3%203.3%200%200%200-.135-.96a2.1%202.1%200%200%200-.413-.777m-.965%202.81q-.22.372-.723.372q-.494%200-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503%200%20.723.372q.22.373.22%201.073t-.22%201.073m11.89-.83l-.09-4.39a4.5%204.5%200%200%201%20.69-.054q.351%200%20.701.054l-.09%204.39q-.315.053-.601.053a3.5%203.5%200%200%201-.61-.054m1.319%201.4q0%20.332-.054.664a4%204%200%200%201-.655.054a4%204%200%200%201-.664-.054a4%204%200%200%201-.054-.655q0-.323.054-.665a4%204%200%200%201%20.655-.054q.323%200%20.664.054q.054.341.054.656m-3.223-4.03q.315%200%20.638.053v4.461q-.288.099-.759.193a5.3%205.3%200%200%201-1.863.023a1.7%201.7%200%200%201-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4%204%200%200%201%20.638-.054q.313%200%20.637.054v2.46q0%20.367.058.606a.9.9%200%200%200%20.18.377a.66.66%200%200%200%20.3.197q.18.058.422.058q.332%200%20.557-.062V9.765a4%204%200%200%201%20.628-.054m-4.362%202.683q.08.225.08.548a1.4%201.4%200%200%201-.542%201.117q-.265.212-.642.333q-.378.12-.853.12a5%205%200%200%201-.395-.013a3%203%200%200%201-.346-.045a4%204%200%200%201-.327-.076a4%204%200%200%201-.35-.116a2.6%202.6%200%200%201%20.085-.49a3%203%200%200%201%20.175-.48q.296.117.561.175q.265.06.552.059q.126%200%20.274-.023a1%201%200%200%200%20.274-.08a.7.7%200%200%200%20.21-.153a.35.35%200%200%200%20.086-.247q0-.216-.13-.31a1.3%201.3%200%200%200-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386%201.332-.386q.35%200%20.692.062q.341.063.691.189a2.5%202.5%200%200%201-.09.485a2.3%202.3%200%200%201-.17.44a4%204%200%200%200-.476-.158a2.2%202.2%200%200%200-.548-.067q-.305%200-.476.094a.32.32%200%200%200-.17.301q0%20.197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12%200C5.373%200%200%205.373%200%2012s5.373%2012%2012%2012c6.628%200%2012-5.373%2012-12S18.628%200%2012%200m0%2022.8C6.035%2022.8%201.2%2017.965%201.2%2012S6.035%201.2%2012%201.2S22.8%206.035%2022.8%2012S17.965%2022.8%2012%2022.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/osu.svg?color=%231a73e8&size=48
