Added social icon is small

That’s indeed the expected look. Try to add the following CSS to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS:

.sd-social-icon .sd-content ul li[class*='share-'].share-custom a.sd-button {
	background: #2185C7 url('your-icon-url.png') no-repeat;
	color: #fff !important;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font: 400 16px/1 Genericons;
	vertical-align: top;
	position: relative;
	top: 0;
	text-align: center;
}

.sd-social-icon .sd-content ul li[class*=share-].share-custom a.sd-button>span, .sd-social-icon .sd-content ul li[class*=share-].share-custom div.option a span {
	background-image: none !important;
}

You’ll need to change the URL to your icon, as well as the background color, but that should do the trick.

Hi Jeremy,

Thank you for your help. Please ask for some questions.

1) As you can see on screenshot new button has shift down from base line. How can I correct it?

2) New button has no tint with service name when mouse is over. May be need add this opttion to adding form?

3) Main question – I want to add some social buttons and how I need to change your code for this some social links?

Regards,
arniarni

1) As you can see on screenshot new button has shift down from base line. How can I correct it?

Try adding !important to the top property, like so:

top: 0 !important;

2) New button has no tint with service name when mouse is over. May be need add this opttion to adding form?

You should see a “Click to share” title when moving your mouse over the button.

3) Main question – I want to add some social buttons and how I need to change your code for this some social links?

That is a bit trickier, as the CSS I gave you will apply to all custom sharing buttons. If you were to add more custom sharing buttons, they would all get the same styles.

There is no proper solution around this, I’m afraid. You could try using the nth-child selector, as explained here, to target specific items on the list of sharing buttons:
https://www.w3schools.com/cssref/sel_nth-child.asp

But then you wouldn’t be able to rearrange the order of the buttons without breaking the style of all the buttons.

1) Thank you. It works.

2) New button has no tint with service name when mouse is over. May be need add this opttion to adding form?

You should see a “Click to share” title when moving your mouse over the button.

I see “Click to share” but I want see the name of social service in this tint like over default buttons, for example, “Click to share to Google+” or “Click to share to Twitter” or could be name only.

3) It is a pity. I think that good idea will add a place to putting external code (from external sharing service).

Regards,
arniarni

I see “Click to share” but I want see the name of social service in this tint like over default buttons, for example, “Click to share to Google+” or “Click to share to Twitter” or could be name only.

That’s a good idea, we’ll consider adding this to Jetpack 3.4. You can follow our progress about this here:
https://github.com/Automattic/jetpack/pull/1404

3) It is a pity. I think that good idea will add a place to putting external code (from external sharing service).

The custom sharing buttons work well but we didn’t consider the option that people would want to customize the look of each custom sharing button separately. I’ll keep that in mind and see if we can improve this system.

Thanks for the feedback.