Icon Request: SoundCloud

[moechaieb]

Icon Request

• Icon name: SoundCloud
• Use case: Musicians who want to link to their SoundCloud from their own website would love this :)
• Screenshots of similar icons: Font Awesome has a SoundCloud icon. Feather already has a cloud icon, but the contour is very different. Maybe we could just have an alternative cloud icon with a different contour that matches the SoundCloud logo?

[shawnwwwww]

#603 lemme know if i need to fix anything!

[ahtohbi4]

@shawnwwwww if you follow the Guidelines, the icon will be the next:

In the set:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M14 17.9637L18 18C21 17.9637 22 16.5 22 15C22 12.5 19 12.5 19 12.5C20 9.5 19 7.6 17.5 7C16 6.4 14 7 14 7V17.9637Z" />
  <path d="M10 9V18" />
  <path d="M6 9V18" />
  <path d="M2 13V16.5" />
</svg>

But I'm not sure. 😄

[jletey]

@ahtohbi4 It's looking really good ... but change the third line to be of the same height as the start of the "cloud" ... this would make it look a lot more like the original icon!

[moeenio]

@shawnwwwww if you follow the Guidelines, the icon will be the next:

In the set:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M14 17.9637L18 18C21 17.9637 22 16.5 22 15C22 12.5 19 12.5 19 12.5C20 9.5 19 7.6 17.5 7C16 6.4 14 7 14 7V17.9637Z" />
  <path d="M10 9V18" />
  <path d="M6 9V18" />
  <path d="M2 13V16.5" />
</svg>

But I'm not sure. 😄

Well, go ahead, submit it following #171 !

[shawnwwwww]

@shawnwwwww if you follow the Guidelines, the icon will be the next:

In the set:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M14 17.9637L18 18C21 17.9637 22 16.5 22 15C22 12.5 19 12.5 19 12.5C20 9.5 19 7.6 17.5 7C16 6.4 14 7 14 7V17.9637Z" />
  <path d="M10 9V18" />
  <path d="M6 9V18" />
  <path d="M2 13V16.5" />
</svg>

But I'm not sure. 😄

may i know how did u edit the svg codes to make it cleaner?

[jletey]

@shawnwwwww Clone the repo, add your icon in the icons/ folder, run npm install and then run npm run build! That last command formats the icons in a nice and clean manner!

[ahtohbi4]

@shawnwwwww The icon above was drawn in Figma, and then its code was cleaned in IDE. The code is already very simple after Figma.

Will you continue your #603?

[ahtohbi4]

The second line was lengthened:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M14 17.96l4 .04c3-.04 4-1.5 4-3 0-2.5-3-2.5-3-2.5 1-3 0-4.9-1.5-5.5C16 6.4 14 7 14 7v10.96zM10 9v9M6 8v10M2 13v3.5" />
</svg>

[moeenio]

I think that looks kinda weird to be honest

[ahtohbi4]

Small update:

[moeenio]

I think you should align the leftmost line at the bottom

[MarcelloTheArcane]

See #763

[moeenio]

See #763

Guess it's too late

[moechaieb]

For reasons outlined in #763, I'm now going to close this. Thank you to everyone who brought forth ideas and designs :)